一、父页面调用子页面的属性
利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法或属性(注意2.0版本用ref取代了el)
方法1:在插入子组件的地方为子组件定义ref,通过this.$ref.子组件的名称.子组件中的属性名调用子页面中定义的属性。
//父页面中
<template>
<div>
<child ref="child" ></child>
</div>
</template>
<script>
import Child from './child'
export default{
components:{
Child
},
mounted(){
console.log(this.$refs.child.flag);//打印子页面中定义的属性的值
}
}
</script>
二、父页面调用子页面的方法
方法1:在插入子组件的地方为子组件定义ref,通过this.$ref.子组件的名称.子组件中的方法名()调用子页面中定义的方法。
方法2:通过组件的$emit、$on方法
//父组件中
<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.child.$emit("childmethod") //子组件$on中的名字
},
},
}
</script>
//子组件中
<template>
<div>我是子组件</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods', function() {
console.log('我是子组件方法');
});
});
},
};
</script>
三、子页面调用父页面的属性
四、子页面调用父页面的方法
方法1:
父级
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
say:this.say
}
},
methods:{
say(){
alert("这是父页面的方法");
}
}
}
</script>
<style>
</style>
子级:
<template>
<button @click="recv">点击调用父页面的方法</button>
</template>
<script>
export default {
inject:['say'],
methods:{
recv(){
this.say();
}
}
}
</script>
方法2:直接在子组件中通过this.$parent.event来调用父组件的方法
父级
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子级
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
在Vue中,组件实例之间的作用域是孤立的,所以不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据
五、父组件向子组件传递参数(通过props)
父页面
<template>
<div>
<child v-bind:param="param"></child>
</div>
</template>
<script>
export default{
components:{
child
},
data(){
return{
param:"hello"
}
}
}
</script>
子页面
<template>
<div>
{{param}}
//这里显示结果为:hello
</div>
</template>
<script>
export default{
props:{
param:""
},
}
</script>
温馨提示:如上所示,父组件在模板中引用子组件,通过v-bind传递参数param,值为hello,其可以为父组件中的动态属性,同时不用v-bind直接param="hello传递静态值给子组件,则传递的值就是hello字符串。在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。
六、子组件向父组件传递参数(利用事件机制)
子组件通过this.$emit()派发事件,父组件利用v-on进行事件监听,实现参数的传递。
温馨提示:同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发
父级
<template>
<div>
<child v-on:listenFun="listenFun"></child>
</div>
</template>
<script>
import Child from './child';
export default{
components:{
child
},
methods:{
listenFun(param){//监听事件,接收参数
console.log(param);//打印结果:hello
}
},
}
</script>
子级
<template>
<div>
<div @click="sendMessage"></div>
</div>
</template>
<script>
export default{
methods:{
sendMessage(){
this.$emit("listenFun","hello");//派发事件,传递参数
}
},
}
</script>