-
父子组件传值
主要是通过自定属性方式实现数据传递
实现步骤:
1、在子组件的调用标签上添加自定义属性, 将需要传递给子组件的数据作为自定义属性的值
ParentComponent.vue
<template>
<div class="parent">
<h1>{{title}}</h1>
<!-- 调用 -->
<ChildComponent :msgFromParent="msgFromParent" :list="list"/>
</div>
</template>
<script>
// 导入组件
import ChildComponent from "@/pages/parent2child/ChildComponent";
export default {
// 注册
components: {
ChildComponent
},
data() {
return {
title: "父组件",
msgFromParent:'来父组件的数据',
list:[
'苹果','香蕉','草莓'
]
};
}
};
</script>
2、在子组件配置对象中, 通过props属性节点来接收父组件通过自定义属性传递的数据
ChildComponent.vue
<template>
<div class="child">
<h1>{{title}}</h1>
<h3>{{msgFromParent}}</h3>
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
<button @click="updateProps">update props</button>
</div>
</template>
<script>
export default {
// 接收父组件通过自定义属性传递的数据: 使用子组件调用标签上的自定义属性名作为数组元素
// props:['msgFromParent','list'],
// 使用子组件调用标签上的自定义属性名作为对象的属性名, 通过对象的方式可以对父组件传递过来的数据类型进行校验
// 数据类型可选值: Number, String, Boolean, Array, Object
// props:{
// msgFromParent:String,
// list:Array
// },
props:{
msgFromParent:{
type:String,
// 指定默认值
default:'默认值'
},
list:Array
},
data(){
return {
title:'子组件'
}
},
methods:{
updateProps(){
// this.list[0]='hello';
}
}
}
</script>
2、子父组件传值
实现步骤:
-
在子组件的内部通过this.$emit('自定义事件名称','数据') 方法触发自定义事件
ChildComponent.vue
<template>
<div class="child">
<h1>{{title}}</h1>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
export default {
data(){
return {
title:'子组件',
msgFromChild:'来自子组件的数据'
}
},
methods:{
sendData(){
// 通过this.$emit()触发自定义事件
this.$emit('message',this.msgFromChild);
}
}
}
</script>
2、在父组件中监听自定义事件, 通过自定义事件处理函数的形参接收数据即可
ParentComponent.vue
<template>
<div class="parent">
<h1>{{title}}</h1>
<h3>{{msgFromChild}}</h3>
<!-- 调用 -->
<ChildComponent @message="receiveData"/>
</div>
</template>
<script>
// 导入组件
import ChildComponent from "./ChildComponent";
export default {
// 注册
components: {
ChildComponent
},
data() {
return {
title: "父组件",
// 接收子组件传递过来的数据
msgFromChild:''
};
},
methods:{
// 自定义事件message的处理函数, data是系统参数, 保存的是子组件通过this.$emit()方法的数据
receiveData(data){
// console.log(data);
this.msgFromChild=data;
}
}
};
</script>
3、非父子组件传值
实现步骤:
主要还是通过自定义事件方式来实现
-
创建一个空的vue实例vm充当事件中心
utils/vm.js
// 导入vue
import Vue from 'vue';
// 创建vue空实例对象
const vm=new Vue();
// 导出vue实例对象
export default vm;
-
在数据发送组件中通过事件中心vm.$emit('自定义事件名称','数据')触发自定义事件
ChildComponent.vue
<template>
<div class="child">
<h1>{{title}}</h1>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
// 导入vm
import vm from '../../utils/vm';
export default {
data(){
return {
title:'子组件',
msgFromChild:'来自组件ChildComponent的数据'
}
},
methods:{
sendData(){
vm.$emit('message',this.msgFromChild);
}
}
}
</script>
-
在数据接收组件中, 通过事件中心vm.$on('自定义事件名称',function(data){})监听自定义事件, 然后通过自定义事件处理函数的形参接收数据即可
Child1Component.vue
<template>
<div class="child1">
<h1>{{title}}</h1>
<h3>{{msgFromChild}}</h3>
</div>
</template>
<script>
// 导入vm
import vm from '@/utils/vm';
export default {
mounted(){
// 监听自定义事件
// data: 系统参数, 保存的是vm.$emit()方法发送的数据
vm.$on('message',data=>{
this.msgFromChild=data;
});
},
data(){
return {
title:'子组件1',
// 接收兄弟组件发送过来的数据
msgFromChild:''
}
}
}
</script>