Vue组件双向绑定之.sync修饰符

父组件

<template>
	<view class="box">
		<Son :byVal.sync="fatherValue"></Son>
	</view>
</template>

<script>
import Son from 'src/components/Son'
export default {
	components: { Son },
	data() {
		return {
			fatherValue: ''
		};
	},
	watch: {
		// 监听 fatherValue 值的改变
		fatherValue(newval,oldval){
			console.log(newval,'newval');
			console.log(oldval,'oldval');
		}
	}
	methods: {
	}
};
</script>

<style lang="scss" scoped>
</style>

子组件

<template>
	<view class="box">
		<!-- <view :xxx='byVal'>...</view> -->
		<image :src="byVal">
		...
	</view>
</template>

<script>
export default {
	name: 'Son',
	props: {
		 byVal: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
		};
	},
	methods: {
		函数名(){
			//this.$emit('update:byVal', 传递的值)
			this.$emit('update:byVal', src)
		}
	}
};
</script>

<style lang="scss" scoped>
</style>