vue 父子组件传值

父组件向子组件传值：

parent.vue

<template>
  <div>
    <!-- 第三步：使用子组件 -->
    <child :toChild="msg"></child>
    <!-- 第四步：绑定一个变量，用它来传递要传的值 -->
  </div>
</template>

<script>
// 第一步：导入子组件
import child from '@/components/child'

export default {
  name: 'parent',
  data () {
    return {
      // 这是要传值的值
      msg: '送给子组件的值'
    }
  },
  components: {
    // 第二步：注册子组件
    child
  }
}
</script>

chile.vue

<template>
  <div>
    <!-- 第二步：这个值就可以展示了 -->
    {{toChild}}
  </div>
</template>

<script>
export default {
  name: 'child',
  props: {
    // 第一步：
    // 定义一个变量，用来接收父组件传过来的值
    // 父组件用什么传，这边就用什么接收
    toChild: ''
  }
}
</script>

这里要注意的是第四步。

<子组件 :车子="货物"></子组件>

父组件用车子运货，子组件也要用车子接货。

  props: {
    // 父组件用什么传，这边就用什么接收
    车子: ''
  }

子组件向父组件传值：

child.vue

<template>
  <div class="child">
    <button @click="toParent">点击</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      // 要传给父组件的值
      msg: '送给父组件的值'
    }
  },
  methods: {
    // 第一步：定义一个方法，作为传值的触发条件
    toParent: function () {
      // 第二步：通过 this.$emit 传值
      this.$emit('sendData', this.msg)
      // 第一个参数为父组件监听子组件的事件，第二个参数为要传的值
      // 可以传多个值
    }
  }
}
</script>

parent.vue

<template>
  <div class="parent">
    <h1>{{ msg }}</h1>
    <!-- 使用子组件 -->
    <child @sendData="getData"></child>
    <!-- 第一步： -->
    <!-- 给子组件绑定一个事件，用来监听子组件 -->
    <!-- 事件被触发时，就通过绑定的方法接收子组件的传值 -->
  </div>
</template>

<script>
// 导入子组件
import child from '@/components/child'

export default {
  name: 'parent',
  data () {
    return {
      // 定义一个变量接收子组件的传值
      msg: ''
    }
  },
  components: {
    // 注册子组件
    child
  },
  methods: {
    // 第二步：
    // 定义一个方法，接收子组件的传值
    getData: function (content) {
      this.msg = content
    }
  }
}
</script>

这里要注意的就是这个绑定的事件，子组件给父组件传值，不是直接就能接收的，这个事件就是父组件用来监听子组件的，父组件监听到子组件传值，才会接收。

打个比方，儿子给父亲送东西，不能说直接扔给父亲，他得先给父亲打个招呼，父亲听到这个招呼后，再接收这个东西，就是这么一回事儿。

这下组件传值和非组件传值都没问题拉。