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(),//响应式方法，绑定this
parentMsg: () => this.parentMsg,//响应式的值，绑定this
parentColor: '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>
注意：如果子组件被第三方组件库包裹，比如vant UI（插槽使用）时，this.$parent获取到的是第三方库组件的实例（多层包裹，不建议使用）。
总结
以上就是今天要讲的内容，本文仅仅简单介绍了父子传值的方式，具体的使用，大家根据具体开发需求使用。