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()中的第一个参数一致,记住需使用驼峰法命名
所有评论(0)