VUE父子组件之间的传值

父传子

父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件给父组件发送消息。

父组件：

<template>

  <p>

    父组件:

    <input type="text" v-model="name">

    <br>

    <br>

    <!-- 引入子组件 -->

    <son:inputName="name"></son>  //son子组件通过 :inputName="name" 将值传过去

  </p>

</template>

<script>

  import son from './son'

  export default {

    components: {

      son

    },

    data () {

      return {

        name: ''

      }

    }

  }

</script>

子组件：

<template>

  <p>

    子组件:

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

  </p>

</template>

<script>

  export default {

    // 接受父组件的值

    props: {

      inputName: String,   //在这里对传过来的进行接收

      required: true

    }

  }

</script>

子传父

子组件可以通过$emit触发父组件的自定义事件。vm.$emit(event,arg) 用于触发当前实例上的事件；

子组件：

<template>

  <p>

    子组件:

    <span>{{sonValue}}</span>

    <!-- 定义一个子组件传值的方法 -->

    <input type="button" value="点击触发" @click="sonClick">

  </p>

</template>

<script>

  export default {

    data () {

      return {

        sonValue: '我是子组件的数据'

      }

    },

    methods: {

      sonClick () {

        // sonByValue是在父组件on监听的方法

        // 第二个参数this.sonValue是需要传的值

        this.$emit('sonByValue', this.sonValue)  

      }

    }

  }

</script>

父组件：

<template>

  <p>

    父组件:

    <span>{{name}}</span>

    <br>

    <br>

    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->

    <son v-on:sonByValue="sonByValue"></son>

  </p>

</template>

<script>

  import son from './son'

  export default {

    components: {

      son

    },

    data () {

      return {

        name: ''

      }

    },

    methods: {

      sonByValue: function (sonValue) {

        // sonValue就是子组件传过来的值

        this.name = sonValue

      }

    }

  }

</script>