Vue组件传值（通信）方式

一、父组件给子组件传值

1. 父组件引入子组件，通过v-bind方式绑定数据，子组件通过props来接收父组件传递的值

父组件:

<template>
	<List :str1="str"></List>
</template>
<script>
import List from "@/components/List"
export default {
  components: { List },
  data () {
   str:'你好'
  }
</script>

子组件:

<template>
	<div> 
	    <p>{{str}}</p>
		<New :str='str'/>
	</div>
</template>
<script>
import New from "@/components/New"
export default {
	prop:{
		str:{
		  type:String,
		  default:''
		}
	}
}
</script>

孙组件:

<template>
	<div> 
	    <p>{{str}}</p>
	</div>
</template>
<script>
export default {
	prop:{
		str:{
		  type:String,
		  default:''
		}
	}
}
</script>

注意：

• 这种方式父传子很方便，父传孙组件，需要父传子，子再传孙；
• 子不能直接修改父组件的数据。

2.子组件直接获取父组件的数据，也可以直接修改父组件的数据，通过this.$parent.xxx

父组件:

<template>
	<List></List>
</template>
<script>
import List from "@/components/List"
export default {
  components: { List },
  data () {
   str:'你好'
  }
</script>

子组件:

<template>
	<div>{{$parent.str}}</div>
	<New/>
</template>
<script>
import New from "@/components/New"
export default {
  created(){
  	console.log(this.$parent.str)
  }
</script>

孙组件:

<template>
	<div>{{$parent.$parent.str}}</div>
</template>
<script>
export default {
  created(){
  	console.log(this.$parent.$parent.str)
  }
</script>

3.依赖注入，父组件通过provide 添加依赖项，使用组件直接通过inject获取

父组件:

<template>
	<List></List>
</template>
<script>
import List from "@/components/List"
export default {
  components: { List },
  provide(){
   return {
   	val1:"我在这里"
   }
  },
  data () {
   str:'你好'
  }
</script>

子组件:

<template>
	<New />
</template>
<script>

孙组件:

<template>
	<div>{{val1}}</div>
</template>
<script>
export default {
  inject:['val1']
</script>

优势：父组件可以直接向某个后代组件传值，不需要一级一级的传递数据
缺点：不太确定从哪个父组件传值过来的

二、子组件给父组件传值

1.子组件可以通过this.$emit(“自定义事件名称”,数据)传值给父组件

父组件:

<template>
	<List @change="handleChange()"></List>
</template>
<script>
import List from "@/components/List"
export default {
  components: { List },
  methods:{
  	handleChange(val){
  		console.log(val)
  	}
  }
}
</script>

子组件:

<template>
	<div @click="btn">{{val1}}</div>
</template>
<script>
export default {
	data(){
		return {
			val1:"你好"
		}
	},
	methods:{
		btn(){
			this.$emit("change",this.val1)
		}
	}
}
</script>

2.父组件直接获取子组件的数据，父组件通过this.$refs.child.xxx

父组件:

<template>
	<List ref="child"></List>
	<button @click="handleBtn">按钮</button>
</template>
<script>
import List from "@/components/List"
export default {
  components: { List },
  methods:{
  	handleBtn(val){
  		console.log(this.$refs.child)
  		this.$refs.child="1111",
  	}
  }
}
</script>

子组件:

<template>
	<div >{{val1}}</div>
</template>
<script>
export default {
	data(){
		return {
			val1:"你好"
		}
	}
}
</script>

3、平辈之间的传值

1.通常新建bus.js文件来做,实例一个对象，全局使用

bus.js文件

import Vue from "vue"
export default new Vue();

子组件：

<template>
	<div>
		<h2>这是list组件</h2>
		<button @click="hanldclick()">按钮</button>
	</div>
</template>
<script>
import bus from "bus.js文件地址"
export default {
  data(){
  	return {
  		str3:"你好"
  	}
  },
  methods:{
  	hanldclick(){
  		bus.$emit("hanldclick",this.str3)
  	}
  }
</script>

兄弟组件：

<template>
	<div>
		<h2>{{str3}}</h2>
	</div>
</template>
<script>
import bus from "bus.js文件地址"
export default {
  data(){
  	return {
  		str3: "你好"
  	}
  },
  created(){
  	bus.$on('hanldclick',val=>{
  		this.str3 = val
  	})
  }
</script>