首页 > 其他 > 详细

Vue2父子组件通信探究

时间:2016-12-09 16:25:26      阅读:361      评论:0      收藏:0      [点我收藏+]

父组件:

<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父子组件通信探究

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!