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>