vue 父组件向子组件传值

父组件

<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>

 

子组件

<template>

  <div>

    子组件:

    <span>{{inputName}}</span>

  </div>

</template>

<script>

  export default {

    // 接受父组件的值

    props: {

      inputName: String, //接受类型与父组件传值的类型必须一致

      required: true

    }

  }

</script>