1、子组件
<template>
<div class="">
{{form}}
</div>
</template>
<script>
export default {
props:['form'],
data () {
return {
msg: 'layout'
}
}
}
</script>
<style>
</style>
2、父组件
<template>
<div class="">
<Child v-bind:form="msg"></Child>
</div>
</template>
<script>
import Child from '@/components/InfoTranstion/index';
export default {
data () {
return {
msg: '我是父组件parent1调用的子组件Child'
}
},
components: {
Child
}
}
</script>
<style>
</style>
3、通信的实现步骤
(1)子组件的 props:绑定的值为属性: props:['form'],即form为父组件操作子组件的入口通道。
(2)在父组件中实现动态绑定只需要将form的值绑定到data中一个变量msg,通过这个变量的改变来展示不同的数据效果。
<Child v-bind:form="msg"></Child>