Vuejs——组件——props数据传递

父组件向子组件传递:

wapper.vue父组件

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
   <!--  将子控件属性inputValue与父组件msg属性绑定 -->
    <child :inputValue="msg"></child>
  </div>
</template>
<style>

</style>
<script>
  export default{
    data(){
      return {
        msg: '请输入'
      }
    },
    components: {
      child: require('./Child.vue')
    }
  }
</script>

 child.vue子组件

<template>
  <div>
    <p>{{inputValue}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          inputValue: String
        }
    }
</script>

 

posted on 2017-07-14 11:23  queena_wq  阅读(127)  评论(0)    收藏  举报