父組件向子組件傳值

 父組件向子組件傳值

1、父組件傳

父組件:
<template>
  <div>
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 子組件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

 

2、子組件接收

<template>
  <div>
    子組件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父組件的值
    props: {
      inputName: String,
      required: true
    },
    watch:{
	   inputName:{ 
	       handler:function(val){
			    console.log(val)       
	       },
	       deep:true
	    } 
	 },
     mounted(){
         console.log(this.inputName)
     }
  }
</script>