一.父子组件传值
要点1：父组件赋予子组件属性值，子组件通过props 来接收值。
要点2：父组件可以通过 子组件对象($ref)，来调用子组件的属性以及方法
要点3：子组件通过$emit 来调用父组件的方法
示例如下：
parent.vue
<template>
<div>
<div>This is parent Component</div>
<div>
<!-- 自定义属性a ,b ,c .sync用于子组件 自定义事件名tt @相当于v-on !-->
<childComponent a="1" b="2" :c.sync="para" @tt="testFunc"></childComponent>
</div>
<div>C的值是：{{para}}</div>
</div>
</template>
<script>
import childComponent from "./child"; //引入一个组件
export default {
name: "parentComponent",
components: { childComponent }, //定义父子关系
data() {
return {
para: 31
};
},
mounted() {},
methods: {
testFunc(p) {
alert("这是父页面的方法" + p);
}
}
};
</script>
<style lang="" scoped>
</style>
child.vue
<template> <div style="border:2px solid blue"> This is child component <p> a:{{ReceiveA}} ,b:{{ReceiveB}} ,c:{{ReceiveC}} </p> <input type="text" v-model="val"/> <input type="button" value="Update C 值" @click="updateValue"></input> <input type="button" value="调用父页面方法" @click="test"></input> </div> </template> <script> export default { name: 'child', props:["a","b"],//接收父页面传递的属性值 data() { return { val:-1, ReceiveA:this.a, ReceiveB:this.b, ReceiveC:this.c } }, methods:{ updateValue(){ //update:属性名 ,可以更改父页面对应绑定的data 变量的值 this.$emit("update:c",this.val); }, test(){ //tt 为父页面绑定的事件名，方法的实体为testFunc this.$emit("tt",this.val); } } } </script> <style lang="" scoped> </style>
关键字解释：
1.$ref :在任意元素标记中 加入 ref="xxxx" 在对应vue 代码中可以通过 this.$refs.xxxx 来调用到这个对象
具体用法参看文档：https://cn.vuejs.org/v2/api/#vm-refs
2. props :接收属性 ，也可以定义为 props: {{a:String},....}
3.$emit: 调用父组件属性方法
具体用法参看文档：https://cn.vuejs.org/v2/api/#vm-emit
4.sync:子组件改变父组件的值
具体参考文档 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
二. 多层组件之间的嵌套传值
应用场景，A组件中有子组件B ，B组件中有组件C ，C调用A传递的属性或方法
通过VUEX 可以解决，但此处不作考虑。此处使用 $listener 和 $attrs 来 解决 跨组件传递的问题。
示例：
parent.vue
<template>
<div>
<div>This is parent Component</div>
<div>
<!-- 自定义属性a ,b ,c 自定义事件名tt @相当于v-on !-->
<childComponent a="aaaaaaa" b="bbbbbb" :c.sync="para" @tt="testFunc"></childComponent>
</div>
</div>
</template>
<script>
import childComponent from "./child1"; //引入一个组件
export default {
name: "parentComponent",
components: { childComponent }, //定义父子关系
data() {
return {
para: 31
};
},
mounted() {},
methods: {
testFunc(p) {
alert("这是父页面的方法" + p);
}
}
};
</script>
<style lang="" scoped>
</style>
chlid1.vue
<template> <div style="border:2px solid blue"> This is child component1 parent para:{{a}} <!-- 传递监听 和 属性!--> <childComponent2 v-on="$listeners" v-bind="$attrs"> </childComponent2> </div> </template> <script> import childComponent2 from "./child2"; //引入一个组件 export default { name: 'child1', props:["a"],//接收父页面传递的属性值 components: { childComponent2 }, //定义父子关系 data() { return { ReceiveA:this.a, } }, methods:{ updateValue(){ //update:属性名 ,可以更改父页面对应绑定的data 变量的值 this.$emit("update:c",this.val); }, test(){ //tt 为父页面绑定的事件名，方法的实体为testFunc this.$emit("tt",this.val); } } } </script> <style lang="" scoped> </style>
chlid2.vue
<template> <div style="border:2px solid red"> This is child component2 parent para: {{b}} <input type="button" value="调用方法" @click="$emit('tt','child2 Para')"></input> </div> </template> <script> export default { name: 'child2', props:["b"],//接收父页面传递的属性值 data() { return { } }, methods:{ } } </script> <style lang="" scoped> </style>
结果图：
关键字解释： $listeners https://cn.vuejs.org/v2/api/#vm-listeners