首页 > 代码库 > Vue2父子组件通信探究

Vue2父子组件通信探究

父组件:

<template>
  <div id="secondcomponent">
    <input type="" v-model="parentMsg">
    <child :my-message="parentMsg"></child>
  </div>
</template>
<script>
    import child from ../components/Hello.vue
    export default {
      data () {
        return {
          parentMsg: ‘父组件数据!可以根据input输入实时改变。
        }
      },
      components: { 
          child
      }
    }
</script>

子组件

<template>
  <div class="hello">
    {{myMessage}}
  </div>
</template>

<script>
export default {
  name: child,
  props: [
    myMessage,
  ],
  mounted(){
    console.log(this.myMessage);
  }
}
</script>

给子组件传递数据使用v-bind动态绑定到子组件上!

Vue2父子组件通信探究