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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值