Vue 组件间通讯

变量：

父组件：

<template>
	<div>
		<div>子组件：</div>
		<son :sendVariable='newVariable'></son>
	</div>
</template>

<script>
import son from '@components/Son'
export default {
	data() {
		return {
			newVariable: ''
		}
	},
	components: {
		'son' : son
	}
</script>

子组件：

<template>
	<div>
		<image src='src' />
	</div>
</template>

<script>
export default {
	data () {
		return {
			src: ''
		}
	},
	watch: {
		sendVariable: function (newVal, oldVal) {
			this.src = newVal
		}
	},
	props: {
		sendVariable: String
	}
}
</script>

方法：

父组件：

<template>
	<div>
		<son :sendVariable='newVariable' @send-image='getImage()'></son>
	</div>
</template>

<script>
import son from '@components/Son'
export default {
	data() {
		return {
			newVariable: ''
		}
	},
	components: {
		'son' : son
	},
	methods: {
		getImage () {
			this.newVariable = '../image/p1.png'
		}
	}
</script>

子组件：

<template>
	<div>
		<<button @click='capture'> click </button>
		<image src='src' />
	</div>
</template>

<script>
export default {
	data () {
		return {
			src: ''
		}
	},
	watch: {
		sendVariable: function (newVal, oldVal) {
			this.src = newVal
		}
	},
	props: {
		sendVariable: String
	},
	methods: {
		capture () {
			this.$emit('send-image')
		}
	}
}
</script>