vue父子組件傳值.sync語法糖

父子傳值props

父組件傳遞

<test :content="title"></test>
data() {
	return {
		title: 'Hello'
	}
},

子組件接收

props:{
	content:{
		type:String,//類型
		default:'',//默認值
		validator: function(val){//預處理props接收過來的數據
			return val
		},
	}
}

props大概有這幾種類型

props:{
	refstr:{
		type:String,
		default:''
	},
	refnum:{
		typr:Number,
		default:0
	},
	refbool:{
		type: Boolean,
		default: false
	},
	refarr:{
		type:Array,
		default:()=>{
			return []
		}
	},
	refobj:{
		type:Object,
		default:()=>({})
	},
	reffun:{
		type:Function,
		default:()=>()=>{}
	}
}

子父傳值$emit

子組件

<button type="default" @click="ok">子組件點擊</button>
ok(){
	this.$emit('child-event','我要傳遞的信息')
}

父組件

<test :content="title" @child-event="parent"></test>
parent(e){
	console.log(e)//打印出子組件傳遞的信息
}

父組件調用子組件方法ref

父組件給子組件添加ref，並且命名。

<view class="home">
	<button type="default" @click="setup">點擊</button>
	<test ref="test"></test>
</view>
methods: {
	setup(){
		this.$refs.test.ok()
		this.$refs.test.adv = '修改你'
	},
}

子組件

<view class="">
	{{adv}}
	<button type="default" @click="ok">子組件點擊</button>
</view>
data(){
	return {
		adv:'子組件內容'
	}
},
methods:{
	ok(){
		console.log('我是子組件的方法')
	}
}

子組件改變父組件的值：.sync語法糖

父組件

<div>
	{{isShow}}
	<test ref="test" :refbool.sync='isShow'></test>
</div>
data() {
	return {
		isShow:true
	}
},

子組件

<div class="">
	<button type="default" @click="ok">子組件點擊</button>
</div>
props:{
	refbool:{
		type: Boolean,
		default: false
	},
},
methods:{
	ok(){
		this.$emit('update:refbool',false)
	}
}