vue中关于组件的传值

组件间的传值方式

1、父组件传给子组件

1-1. 自定义属性props

父组件

<Childern :visible="visible"><Children>

子组件

props:{
	visible:{
		type:Boolean,
		default:false
	}
}

注意：子组件不能直接修改父组件的数据

1-2. 边界传值$parent

子组件

created(){
	console.log(this.$parent.xxx)
}

注意：子组件可以直接修改父组件的数据

2、父组件传给后代元素

2-1. 依赖注入provide和inject

父组件

provide(){
	return {
      msg:this.msg
    }
}

后代组件

inject:['msg']

注意：父组件可以直接向某个后代元素传值

子组件传给父组件

3-1. 自定义事件this.$emit

子组件

this.$emit('change', num);

父组件

<template>
	<h1>来自子组件的数据：{{ number }}</h1>
	<child @change="changeNum"></child>
</template>
<script>
	export defautl{
		data(){
			return{
				number:0,
			}
		},
		methods:{
			changeNum(val){
				this.number = val
			}
		}
	}
</script>

3-2. 边界传值 ref

父组件

<template>
	<child ref="child"></child>
</template>
<script>
	export defautl{
		created(){
			console.log(this.$refs.xxx)
		}
	}
</script>

注意：父组件可以直接修改子组件的值

组件之间传值

4-1. $emit和$on

创建事件中心

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

某组件

	<template>
	 <div class="child">
	    <p>child中的数据：{{ childData }}</p>
	    <button @click="sendData2">发送数据给其他组件</button>
	  </div>
	</template>
	<script>
	import em from "../utils/events"
	export default {
	  data() {
	    return {
	       childData: "Child组件中的数据"
	   	}
	 },
	  methods: {
	    sendData2() {
	      // 通过事件中心，发送自定义事件
	      em.$emit("otherEvent", this.childData)
	    }
	  }
	}
</script>

其他组件

	<template>
 <div class="other">
    <p>来自其他组件的数据：{{ dat }} </p>
  </div>
</template>
<script>
import em from "../utils/event"
  
export default {
  data() {
    return {
      dat: "等待接收其他组件的数据"
  		 }
	 },
	  created() {
	    // 当前组件实例一旦创建，就开始监听数据传递事件
	    em.$on("otherEvent", msg => {
	      // 接收事件中的参数 数据
	      this.dat = msg
	   		})
		 }
	}
</script>

4-2. 消息总线$bus

main.js

// 注册一个消息总线
Vue.prototype.$bus = new Vue

某组件

	sendData3() {
		  // 通过消息总线发送数据
		  this.$bus.$emit("oEvent", this.childData)
	}

其他组件

	// 消息总线的方式监听自定义事件
	this.$bus.$on("oEvent", res => {
	  this.dat2 = res
	})