vue中父子组件传值
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 {
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: '传给父组件的值'
}
},
props: {
father2Son: String
},
methods: {
send2Father () {
this.$emit('clickSendValue', this.toFatherValue)
}
}
}
</script>
<style lang='less' scoped>
</style>
人生没有回头路, 走的每一步都算数!!!