1.父组件向子组件传值
定义父子组件 并在父组件中引入注册子组件
<
template
>
<
div
>
<
child
v-bind:greetMsg="
name"
></
child
>
</
div
>
</
template
>
<
script
>
import
Child
from
'../components/child.vue'
export
default {
data(){
return {
name:
"你好，我是爸爸"
}
},
components:{
Child
}
}
</
script
>
<
style
>
</
style
>
定义子组件
<
template
>
<
div
>{{
greetMsg}}
</
div
>
</
template
>
<
script
>
export
default {
props:[
'greetMsg'
]
}
</
script
>
<
style
>
</
style
>
页面显示效果是
父组件向子组件传值是利用props
子组件中的注意事项：props:['greetMsg']，注意props后面是[]数组可以接收多个值，不是{}。
且此处的greetMsg用greet-msg会报错，记住需用驼峰法命名
父组件中的注意事项：数据是在父组件中定义
需先引入再注册Child
使用的是v-bind:greetMsg="name"，此处的greetMsg需与子组件中props中的一致2.子组件向父组件传值
定义父组件
<
template
>
<
div
>
<
child
v-on:send="
getMessage"
></
child
>
<
div
>{{
msg}}
</
div
>
</
div
>
</
template
>
<
script
>
import
Child
from
'../components/child'
export
default {
components:{
Child
},
data(){
return {
msg:
''
}
},
methods:{
getMessage(
greetMsg){
this.
msg=
greetMsg
}
}
}
</
script
>
<
style
>
</
style
>
定义子组件
<
template
>
<
div
>
<
button
@click="
sendMessage"
>点击一下，向父组件传值
</
button
>
</
div
>
</
template
>
<
script
>
export
default {
data(){
return{
sayName:
"您好，我叫小明，我是您孩子"
}
},
methods:{
sendMessage(){
this.
$emit(
'send',
this.
sayName)
}
}
}
</
script
>
<
style
>
</
style
>
点击按钮后，页面显示结果是
子组件向父组件传值是利用在子组件中使用$emit在父组件中绑定事件来实现
子组件中的注意事项：需在子组件中定义数据
绑定事件，比如@click事件，再在methods里面定义该事件this.$emit('send',this.sayName)
父组件中的注意事项：引入注册子组件
绑定相应的方法 v-on:send注意此处的send需与子组件中的this.$emit()中的第一个参数一致，记住需使用驼峰法命名