vue 父子组建传值

父子组建传值"/>

vue 父子组建传值

父子组件传值有两种方法，其中一种是常规的传值

父组件
<Father><div @click="asd"></div><Son :inputname="qwe" @childfn="parentfn"></Son>
</Father><script>
export default {data() {return {msg: '',};},methods: {asd() {this.qwe = 'son'},//父组件接收值parentfn(son) {this.msg = son},}
}
</script>子组件
<Son><div>{{inputname}}</div>
</Son>
<script>
export default {name: "Sonsb",props: {//子组件接收值inputname: {type: String,default: 'qweasd'}},data() {return {msg: "子组件传值"}},mounted() {//子向父传值this.$emit('childfn',this.msg)},
}
</script>

另一种是使用$refs和 $parent传值

父组件
<Father><div @click="asd"></div><Son ref="son"></Son>
</Father><script>
export default {data() {return {msg: '',};},methods: {//父组件传值asd() {const _this = this.$refs.son_this.text = 'qweasd'},//父组件接收值parentfn(son) {this.msg = son},}
}
</script>子组件
<Son><div>{{inputname}}</div>
</Son>
<script>
export default {name: "Sonsb",data() {return {text: '',msg: "子组件传值"}},mounted() {//子向父传值this.$parent.parentfn('zxczxc')},
}
</script>