Vue 关于$emit与props的使用

一、props 和 $emit

二、示例

1.父组件

// parent.vue
<template>
	<div>
      	<p>childMessage: {{childMessage}}</p>
      	<children :sendmessage=\'childMessage\' @showMsg=\"updataMsg\"></children>
	</div>
</template>

import children from \'/*...*/\'

export default{
	data () {
		return {
			childMessage: \'父组件给子组件传值\'
		}
	},
	methods: {
		updataMsg(message) {
			this.childMessage = message
			console.log(this.childMessage)
		}
	},
	components: {
		children
	}
}

2.子组件

// children.vue
<template>
	<div>
		// 通过按钮点击事件将子组件的值传给父组件
	    <button @click=\"sendtoParent\">Click this Button</button>
	</div>
</template>

<script>

export default {
  props: [\'sendmessage\'],
  methods: {
  	sendtoParent() {
  		//$emit括号里的第一个参数为自定义事件
  		this.$emit(\'showMsg\',\'子组件通过$emit给父组件传值\')
  	}
  }
}
</script>

结果展示

父子组件通信之前


父子组件通信之后