Vue2父子组件通信探究

最新推荐文章于 2024-11-02 12:42:04 发布

dfplrtyx049773

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/91allan/p/6149668.html

版权

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>