学习笔记-组件传值| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
前言
组件之间的传值可以分为三种：
1.父级向子级传递数据
2.子级向父级传递数据
3.非父子级传递数据
本文主要讲解父级向子级传递数据和子级向父级传递数据这两种
1.父级向子级传递数据
父级向子级传递数据：使用属性传递
1）在App组件中，绑定msg属性传递给Child内部（:msg="message"）data()中message:"app.vue data"
2）Child获取信息用props：["msg"]（数组字符串，msg为App组件传的组件名）
3）Child中template绑定表达式msg App.vue代码为：
<template>
<div>
<h1>hello world</h1>
<child :msg="message"></child>
</div>
</template>
<script>
//父级向子级传递数据：使用属性传递
import Child from "./components/Child.vue"
export default {
//注册组件
components:{
Child
},
data(){
return{
message:"app.vue data"
}
},
methods:{
}
}
</script>
Child.vue代码为：
<template>
<div>
<h1>我是Child组件</h1>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
props:["msg"]
}
</script>
2.子级向父级传递数据
子级向父级传递数据：用自定义事件
子级中建立一个组件button，点击button后，把子级的message数据传给父级，然后父级的hello world变成子级的数据
详细步骤：
1）在父级App.vue中的中先自定义一个事件 @myevent="changeData"然后在methods里定义一个changeData()方法把hello变成子级的数据，h1中为childData，在methods中定义data中初始值为childData:""，用changeData()获取子级的数据
2）在Child中触发事件,Child.vue中写sendData()方法，在Child.vue中button点击click执行sendData来实现传递数据，在sendData中用 this.$emit 方法可以触发父级的自定义事件，this.$emit("myevent"),在子级中data()返回childData数据为"I'm child".同时this.$emit("myevent"，this.childData)把数据传给myevent
3）在App.vue中myevent调用的是changeData在方法中changeData(childData){this.childData = childData}
4)点击子级按钮“传递数据”父级标签出现"I'm child"
父级App.vue代码如下
<template>
<div>
<h1>{{childData}}</h1>
<child @myevent="changeData" :msg="message"></child>
</div>
</template>
<script>
//父级向子级传递数据：使用属性传递
import Child from "./components/Child.vue"
export default {
//注册组件
components:{
Child
},
data(){
return{
message:"app.vue data",
childData:''
}
},
methods:{
changeData(childData){
this.childData=childData;
}
}
}
</script>
子级Child.vue代码如下
<template>
<div>
<h1>我是Child组件</h1>
<h1>{{msg}}</h1>
<button @click="sendData">传递数据</button>
</div>
</template>
<script>
//子级向父级传递数据：用自定义事件
export default {
props:["msg"],
data(){
return{
childData:"I'm child"
}
},
methods: {
sendData(){
this.$emit("myevent",this.childData)
}
},
}
</script>
显示结果：
点击传递数据，出现I'm child
常见错误总结
父级向子级传递数据时child的标签要写在APP.vue组件中，写在Child.vue中会报错如下：
