vue组件通信

Posted 2021-09-28 嘿起屁儿整

常用组件通信

• • props跟$emit（只能用于父子组件）
  • provide 跟 inject（祖先等有层级组件）
  • $emit 跟 $on（非父子任意组件）
  • ref 和 $refs
  • 其他方式

props跟$emit（只能用于父子组件）

1. props：父组件向子组件传递信息

父组件中：引用子组件。然后在其引用的子组件中绑定传递信息
<template>
  <div>
    <Son :myprop="mypropdata"></Son>
  </div>
</template>
<script>
import Son from '@/components/Son.vue';
export default {
  data(){
    return {
      mypropdata:"父级里的数据"
    }
  },
  components: {
    Son
  }
};
</script>

子组件中：用props:["绑定信息"] 直接获取
<template>
  <div>
   子组件数据:{{myprop}}
  </div>
</template>
<script>
export default {
 	props: ["myprop"],
};
</script>

最终浏览器显示内容： 子组件数据：父级里的数据

2. $emit：子组件触发父组件的自定义事件，来向父组件传递信息

子组件中：触发父级自定义事件，并传入数据
<template>
  <div>
    <button @click="toparent">点击改变父组件</button>
  </div>
</template>
<script>
export default {
  methods: {
    toparent() {
      this.$emit("changeparent","子组件的数据") //“子组件的数据“作为值传递到父组件的自定义方法中
    },
  },
};

父组件中：通过定义的自定义事件，获取子组件传递的数据
<template>
  <div>
    <Son @changeparent="daddatashow"></Son>
    获取的子组件数据：{{getdata}}
  </div>
</template>
<script>
import Son from '@/components/Son.vue';
export default {
  data(){
    return {
      getdata:""
    }
  },
  components: {
    Son
  },
  methods:{
  	 daddatashow(data) {
      this.getdata = data;
    }
  }
};
</script>

最终浏览器显示： 获取的子组件数据：子组件的数据

3. 注意：props接收父组件参数，父组件的值发生变化，在created或mounted阶段都是初始值。只有利用watch监听数据变化（如果发现没打印，那么肯定是watch写重了，检查一下）

watch:{
 good_id: {
   handler(newval) {
     if (newval) {
       console.log("newgood_id---", newval)
     }
   },
   immediate: true
 }
}

provide 跟 inject（祖先等有层级组件）

provide/inject 绑定默认并不是响应式的，但是如果provide传入可监听的对象，也可以是响应式的。
可以理解为react的context上下文，目的就是provide向后续组件传值，inject接受数据

这种写死的，他就不是响应式的。只能接受一个固定的值

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
}

以下就是响应式的。可用于接口数据获取后的子组件处理

祖先组件
 data(){
 	return {
		natureObj:{nature:""}
	}
 },
 provide() {
    return {
      //provide实现响应式。这里必须是响应式对象
      natureSon: this.natureObj,
    }
  },
 methods:{
 	//如果调用此自定义方法，那么子组件会响应式的改变（场景：请求接口后返回的）
 	getinfo(){
 		this.natureObj.nature= "111111"
 	}
 }

子组件

inject: ["natureSon"],
created(){
	console.log(this.natureSon)  //111111
}

$emit 跟 $on（非父子任意组件）

1. 先在main.js中把eventBus设置为全局变量（这样各个层级就没有限制了）

Vue.prototype.$bus = new Vue();   //这个$bus随意命名，反正意思是添加到vue原型中。因为$emit跟$on的this指向需要是同一个vue实例

2. $emit：通过触发事件，发送数据

<template>
  <div>
   <button @click="toothers">点击向其他组件传递信息</button>
  </div>
</template>
<script>
export default {
	methods:{
		toothers(){
		    //这个事件名随意定义，只要统一就行。 “发送的数据”作为值传递到接收方法中
			this.$bus.$emit("sendandget","发送的数据") 
		}
	}
}
</script>

3. $on：通过接收事件，接收数据

<template>
  <div>
    接收到的数据：{{getdata}}
  </div>
</template>
<script>
export default {
	data() {
    	return {
     	getdata:""
    };  
   created() {
    this.$bus.$on("sendandget",res=>{
      this.getdata = res;
    })
  },
}
</script>

最终浏览器显示： 接收到的数据：发送的数据

ref 和 $refs

1. 标签通过ref来命名
2. 使用通过this.$refs.命名 获取ref对应标签及内部内容

<template>
  <div>
    <div ref="mydiv">我是div</div>
    <Son ref="sonCom"></Son>
    <button @click="getSon">点击获取children</button>
  </div>
</template>
<script>
import Son from "@/components/Son.vue";
export default {
	methods: {
     getSon(){
           console.log(this.$refs.mydiv);        //打印：<div ref="mydiv">我是div</div>
           console.log(this.$refs.sonCom);       //打印：Son这个组件的全部
           console.log(this.$refs.sonCom.myname); //打印：子组件我的名字 。
       }
    }
}
</script>


子组件Son.vue
<template>
  <div>我是子组件 </div>
</template>
<script>
export default {
   data () {
     return {
         myname:"子组件我的名字"
     }
   },
}
</script>

其他方式

1. 个人水平有限，感觉上面几个就可以了。复杂的用vuex处理
2. $children 和 $parent
3. $attrs 和 $listeners