当前位置：首页 > news >正文

Vue2父子传值

news 来源：原创 2024/9/19 20:49:53

Vue2父子传值

一、父子组件传值的多种方式

1.1父组件调用子组件

通过props
通过ref
通过$children

1.2子组件调用父组件

通过$emit
通过provide/inject
通过$parent

二、父组件调用子组件——使用步骤

1.父组件通过 props 传值，可传属性，方法

代码如下（示例）：

父组件

<template><div><h1>父组件</h1><Son1 :parentMethod="mytMethod" :isShow="isShow" /></div>
</template><script>
import Son1 from "./components/son1.vue";export default {name: "test",components: {Son1,},data() {return {isShow: true,};},methods: {mytMethod() {console.log("触发了父组件的方法");this.isShow = !this.isShow;},},
};
</script>

子组件

<template><div><h4>子组件</h4><button @click="parentMethod">点我</button><div v-if="isShow">控制显示</div></div>
</template><script>export default {props:{parentMethod:{type:Function,default:()=>{}},isShow:{type:Boolean,default:false}}}
</script>

2.父组件通过 ref 获取子组件的实例，直接调用子组件的方法。

代码如下（示例）：

父组件：

<template><div><h1>父组件</h1><button @click="changeSon1">点我修改子组件显示列表</button><Son1 ref="son1"  /></div>
</template><script>
import Son1 from "./components/son1.vue";export default {name: "test",components: {Son1,},methods: {changeSon1(){let list = ['我是新的列表','哈哈哈']this.$refs.son1.setListData(list)}},
};
</script>

子组件：

<template><div><h4>子组件</h4><ul v-for="(item, index) in list" :key="index"><li>{{ item }}</li></ul></div>
</template><script>
export default {data() {return {list: ["默认"],};},methods: {setListData(listData) {this.list = listData;},},
};
</script>

3.父组件通过 $children 获取子组件的实例的集合。

父组件：

<template><div><h1>父组件</h1><button @click="changeMsg">点我更新子组件</button><Son1 /><Son2 /></div>
</template><script>
import Son1 from "./components/son1.vue";
import Son2 from "./components/son2.vue";export default {name: "test",components: {Son1,Son2,},data() {return {};},                                  methods:{changeMsg(){console.log(this.$children);//[VueComponent, VueComponent] 子组件实例集合this.$children[0].getData();this.$children[1].getData();this.$children[0].msg ='111'console.log(this.$children[0].msg );console.log(this.$children[1].msg);}}
};
</script>

子组件：

<template><div><h4>子组件1</h4><div>{{ msg }}</div></div>
</template><script>
export default {name:"son1",data() {return {msg: "子组件1默认",};},methods: {getData() {this.msg = "子组件1更新";},},
};
</script>

<template><div><h4>子组件2</h4><div>{{ msg }}</div></div>
</template><script>
export default {name:"son2",data() {return {msg: "子组件2默认",};},methods: {getData() {this.msg = "子组件2更新";},},
};
</script>

三、子组件调用父组件——使用步骤

1.子组件通过 $emit 触发父组件方法

代码如下（示例）：

子组件

<template><div><h4>子组件</h4><button @click="changeM">点我修改父组件msg</button></div>
</template><script>
export default {data() {return {};},methods: {changeM() {this.$emit("changeMsg", "新的了！辛德瑞拉");},},
};
</script>

父组件

<template><div><h1>父组件</h1><div>{{ msg }}</div><Son1 @changeMsg="changeMsg" /></div>
</template><script>
import Son1 from "./components/son1.vue";export default {name: "test",components: {Son1,},data() {return {msg: "父組件默认值",};},methods: {changeMsg(newVal) {this.msg = newVal;},},
};
</script>

2.provide/inject

代码如下（示例）：

父组件

<template><div><h1>父组件</h1><Son1 /></div>
</template><script>
import Son1 from "./components/son1.vue";export default {name: "test",components: {Son1,},data() {return {parentMsg:"eee"};},provide() {return {myMethod: () => this.myMethod(),//响应式方法，绑定thisparentMsg: () => this.parentMsg,//响应式的值，绑定thisparentColor: 'red',//非响应式的值};},methods:{myMethod(){console.log("组件方法被调用");this.parentMsg +="a"}}

子组件：

<template><div><h4>子组件</h4><button @click="myMethod">点我</button>响应式： {{parentMsg()}}非响应式：  {{parentColor  }}</div>
</template><script>
export default {inject: ["myMethod",'parentMsg','parentColor'],data() {return {};},methods: {},
};
</script>

3.$parent 子组件获取父组件的数据、调用父组件的方法

父组件

<template><div><h1>父组件</h1><Son1 /></div>
</template><script>
import Son1 from "./components/son1.vue";export default {name: "test",components: {Son1,},data() {return {parentMsg:"父组件的值"};},                                  methods:{myMethod(){console.log("父组件方法被调用");}}
};
</script>

子组件：

<template><div><h4>子组件</h4><button @click="getData">点我</button><div>{{ msg }}</div></div>
</template><script>
export default {data() {return {msg:"子组件默认"};},methods: {getData(){this.$parent.myMethod()this.msg = this.$parent.parentMsg;}},
};
</script>