Vue2父子组件通信探究

Posted 2020-08-22 发哥要做活神仙

父组件：

<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动态绑定到子组件上!