码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2父子组件通信探究

时间:2016-12-09 16:27:42      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:bin   input   动态   turn   ted   span   vue   数据   template   

父组件:

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

标签:bin   input   动态   turn   ted   span   vue   数据   template   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!