vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...

一.父子组件传值

要点1：父组件赋予子组件属性值，子组件通过props 来接收值。

要点2：父组件可以通过 子组件对象($ref)，来调用子组件的属性以及方法

要点3：子组件通过$emit 来调用父组件的方法

示例如下：

parent.vue

This is parent Component

C的值是：{{para}}

import childComponent from"./child"; //引入一个组件

export default{

name:"parentComponent",

components: { childComponent },//定义父子关系

data() {return{

para:31};

},

mounted() {},

methods: {

testFunc(p) {

alert("这是父页面的方法" +p);

}

}

};

View Code

child.vue

This is child component

a:{{ReceiveA}} ,b:{{ReceiveB}} ,c:{{ReceiveC}}

exportdefault{

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);

}

}

}

View Code

关键字解释：

1.$ref :在任意元素标记中 加入 ref="xxxx"  在对应vue 代码中可以通过 this.$refs.xxxx 来调用到这个对象

2. props :接收属性 ，也可以定义为 props: {{a:String},....}

3.$emit: 调用父组件属性方法

4.sync:子组件改变父组件的值

二. 多层组件之间的嵌套传值

应用场景，A组件中有子组件B ，B组件中有组件C ，C调用A传递的属性或方法

通过VUEX 可以解决，但此处不作考虑。此处使用 $listener  和 $attrs 来 解决 跨组件传递的问题。

示例：

parent.vue

This is parent Component

import childComponent from"./child1"; //引入一个组件

export default{

name:"parentComponent",

components: { childComponent },//定义父子关系

data() {return{

para:31};

},

mounted() {},

methods: {

testFunc(p) {

alert("这是父页面的方法" +p);

}

}

};

View Code

chlid1.vue

This is child component1

parent para:{{a}}

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);

}

}

}

View Code

chlid2.vue

This is child component2

parent para: {{b}}

exportdefault{

name:'child2',

props:["b"],//接收父页面传递的属性值

data() {return{

}

},

methods:{

}

}

View Code

结果图：