vue组件之间互相传值：父传子、子传父

1、父组件向子组件传值

1.建立子组件，在src/components/文件夹下新建一个child.vue

2.在child.vue 中建立props,而后新加一个title属性

<template>
	<div>
		<h1>child子组件</h1>
		<div>{{title}}</div>
	</div>
</template>
<script>
export default {
  name: 'child',
  props:["title"],
}
</script>
<style scoped lang="less">

</style>

3.在parent.vue父组件中注册child组件，并在template中加入child标签，标签中绑定title属性，并在data中赋值

<template>
	<div>
		<h1>parent父组件</h1>
		<child v-bind:title="parentTitle"></child>
	</div>
</template>
<script>
import child from './child';//引用子组件
export default {
  name: 'parent',
  data(){
	  return {
		  parentTitle:"hello,child"
	  }
  },
  components:{
	  child
  }
}
</script>
<style scoped lang="less">

</style>

父组件向子组件传值总结：

• 子组件在props中建立一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中建立的属性
• 把须要传给子组件的值赋给该属性

2、子组件向父组件传值

1.在子组件中建立一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
	<div>
		<h1>child子组件</h1>
		<button @click="sendMsgToParent">向父组件传值</button>
	</div>
</template>
<script>
export default {
  name: 'child',
  methods:{
	  sendMsgToParent(){
		  this.$emit("listenToChildEvent","this message is from child")
	  }
  }
}
</script>
<style scoped lang="less">

</style>

3..在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
	<div>
		<h1>parent父组件</h1>
		<child v-on:listenToChildEvent="showMsgFromChild"></child>
	</div>
</template>
<script>
import child from './child';//引用子组件
export default {
  name: 'parent',
  data(){
  },
  components:{
	  child
  },
  methods:{
	  showMsgFromChild(msg){
		  console.log(msg)
	  }
  }
}
</script>
<style scoped lang="less">

</style>

子组件向父组件传值总结：

• 子组件中须要以某种方式例如点击事件的方法来触发一个自定义事件
• 将须要传的值做为$emit的第二个参数，该值将做为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

总之，在通讯中，不管是子组件向父组件传值仍是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。