Vue父子组件传值

vue中父子组件传值

父->子	子->父
props	$emit()方法

talk is cheap, show the code.

父组件

<template>
  <div id="father" >
    <h1>Father组件</h1>
    <p>=================================================================</p>
    <!-- 2.0 在这里动态绑定数值到father2Son上, 这里的father2Son就是子接收到的值 -->
    <son-com :father2Son='data1'  @clickSendValue= 'receiveSonValue'></son-com>
    </div>
</template>

<script>
import SonCom from './SonCom'
export default {
     
  name: 'FatherCom',
  data () {
     
    return {
     
      // 1.0 父传子的数值. 可以是其他数据类型的
      data1: 'mango'
    }
  },
  components: {
     
    SonCom
  },
  methods: {
     
    // 从孩子传来的方法, 获取到值
    receiveSonValue (playLoad) {
     
      console.log('父组件收到值了', playLoad)
    }
  }
}
</script>

<style lang='less' scoped>

</style>

子组件:

<template>
  <div>
    <h3>子组件:</h3>
    <h3>这是父组件传过来的值: {
     {
     father2Son}}</h3>
    <button @click="send2Father">传值给父组件</button>
    </div>
</template>

<script>
export default {
     
  name: 'SonCom',
  data () {
     
    return {
     
      // 传给父组件的数
      toFatherValue: '传给父组件的值'
    }
  },
  // 1.0 通过props获取到父传过来的数据.
  props: {
     
    // 这里的变量必须要给类型!
    father2Son: String
  },
  methods: {
     
    // 点击传值给父组件
    send2Father () {
     
       // console.log('孩子要传值了!', '传的值是 我爱你哦! 爸爸')
      // 点击触发父亲中的方法,传值.
      this.$emit('clickSendValue', this.toFatherValue)
    }
  }
}
</script>

<style lang='less' scoped>

</style>

人生没有回头路, 走的每一步都算数!!!