首页 > 代码库 > Vuejs——组件——props数据传递

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>

 

 

 

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