vue父子组件通过$emit和props实现相互传值
2020-02-03 本文已影响0人
CoderZb
vue父子组件相互传值是非常常见的场景,例如
弹框场景
或公共功能模块的封装场景
。常用的是采用$emit
和props
的方式。
其中$emit
是子组件向父组件传值,props
是父组件向子组件传值。
以下为全部代码
父组件FirstPage.vue
<template>
<div>
<!-- 父组件取出子组件传递过来的json数据,并显示到父组件的页面上 -->
<div class='parentClass'>我是父组件:子传父为{{toParent}}</div>
<!-- 父组件通过自定义的toChild1和toChild1属性,向子组件传值 -->
<!-- toChild1是静态属性,对应的值为Apple -->
<!-- :toChild2是动态属性,对应的值不是attributeValue,而是orange -->
<!-- 父组件通过@toParent来监听子组件传递过来的事件,然后通过自定义的toParentValue函数来触发 -->
<PassChild toChild1='Apple' :toChild2='attributeValue' @toParent='toParentValue'></PassChild>
</div>
</template>
<script>
import PassChild from "../components/PassChild.vue";
export default {
data() {
return {
// 默认值
toParent:'',
// 动态属性值
attributeValue:'orange'
};
},
methods: {
toParentValue(value){
// 父组件取出子组件传递过来的json数据,并显示到父组件的页面上
this.toParent = value.name;
}
},
components: {
PassChild:PassChild,
}
};
</script>
<style>
.parentClass{
margin:0 auto;
width:600px;
height:100px;
text-align:center;
color:orange;
font-size:30px;
}
</style>
子组件PassChild.vue
<template>
<div class='childContainer'>
我是子组件:父传子为{{toChild1}},{{toChild2}}
</div>
</template>
<script>
export default {
// 父组件向子组件传值,通过props接收
props: {
toChild1: {
type: String,
required: true, // 父组件必须给子组件传递toChild1属性,否则会报错
default: "toChild1的默认值"// 如果父组件没有给子组件传递toChild1属性,那么以默认值代替
},
toChild2: {
type: String,
default: "toChild2的默认值"// 如果父组件没有给子组件传递toChild2属性,那么以默认值代替
}
},
data() {
return {};
},
methods: {},
mounted(){
// 子组件向父组件传值(通过自定义toParent事件,并携带参数),值为json数据{"name":'CoderZB','sex':'man'}。当然也可以传递单个字符串
this.$emit("toParent",{"name":'CoderZB','sex':'man'});
}
};
</script>
<style>
.childContainer{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 auto;
background-color: red;
}
</style>