父子孙通讯（$attrs,$listeners）（provide和inject）与Vuex

最新推荐文章于 2024-04-24 20:12:25 发布

余心不忍

最新推荐文章于 2024-04-24 20:12:25 发布

阅读量309

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49088708/article/details/125482568

版权

父组件为view问价夹中的FatherDom.vue

子与孙组件是components中的ChildrenDom和ChildrenDomChild，

父子之间的通讯通过props和$emit来进行简单的的通讯，但是中间若是加上一个组件就不能完美实现通讯。所以需要使用$attrs&$listeners,在子组件中充当中转作用。

父传孙

父组件动态绑定传递的数据传递给子组件，子组件通过props接受数据，可以直接在子组件页面上渲染，若是值渲染一个内容还有数据没有渲染，为渲染的数据就会直接在标签内出现，不会影响页面的内容，这是默认的内容。

但是可以使用inheritAttrs:false（和data同级）阻止默认没有被执行的数据。而这些没有被执行的数据就会被存放在$attrs中如：attrs:{ "coo": "hello world2" }。所以孙组件可以接着使用attrs来接受未执行的数据。就像子组件接受父组件的内容一样。

孙传父

和父孙通讯以及父子通讯方法类似，在孙组件中设置点击事件，在讲事件指派一个方法给子组件，子组件讲使用v-on="$listeners"来中专这个方法。最后直接还是父组件接受改方法。并在methods中再次创建一个方法。即可点击孙组件内容实现父组件内容的实现。

父组件

<template>
	<div>
		我是父组件fatherdom
		<ChildrenDom :foo="foo" :coo="coo" @startRocket="rocket"></ChildrenDom>
	</div>
</template>

<script>
	import ChildrenDom from '../components/ChildrenDom.vue'
	
	export default {
		name:'FatherDom',
		components:{
			ChildrenDom
		},
		data(){
			return{
				foo:'hello world',
				coo:'hello world2'
			}
		},
		methods:{
			rocket(){
				console.log("火箭升天成功")
			}
		}
	}
</script>

<style>
</style>

子组件

<template>
	<div>
		<p>foo:{{foo}}</p>
		<!-- <p>attrs:{{$attrs}}</p> -->
		<!-- attrs:{ "coo": "hello world2" }上一行渲染的内容 -->
		<ChildrenDomChild v-bind="$attrs" v-on="$listeners"></ChildrenDomChild>
		<!-- v-bind="$attrs"为中专向传递孙组件 -->
	</div>
</template>

<script>
	import ChildrenDomChild from './ChildrenDomChild.vue'
	export default {
		name:'ChildrenDom',
		props:['foo'],
		inheritAttrs:false,//阻止没有被执行的数据了
		components:{
			ChildrenDomChild
		}
	}
</script>

<style>
</style>

孙组件

<template>
	<div>
		<p>coo:{{coo}}</p>
		<button @click="RocketStart">我要发射火箭</button>
	</div>
</template>

<script>
	
	export default {
		name:'ChildrenDomChild',
		props:['coo'],
		methods:{
			RocketStart(){
				this.$emit("startRocket")
				console.log('Rocketstart')
			}
		}
	}
</script>

<style>
</style>

provide（提供）和inject（依赖注入）组件通讯

不是响应式，组件中的六种通讯方式之一

第一种props和$emit，2.$refs 3.children和parent

4.vuex,5、attrs和listeners，6、provide和inject

provide是将组件的所有内容都传递出去

provide(){
			return{
				app:this
			}
		},

现在的app就是this，指的是App.vue整个的实例对象。

子组件桐过依赖注入，inject接受app即可调用app页面中的所有方法数据等。

父组件部分

<template>
  <div id="app">
      <div>
		 <nav>
			 <router-link to="/" tag="h2">HomeView</router-link>|
			 
			 <router-link to="/aboutview" tag="h2" @click="changeapp()">AboutView</router-link>
			 <router-link to="/fatherdom" tag="h2">fatherdom</router-link>
		 </nav>
	  </div>
	    <!-- 路由出口 -->
	    <!-- 路由匹配到的组件将渲染在这里 -->
	    <router-view></router-view>
  </div>
</template>
<script>
	export default {
		name:'App',
		data(){
			return{
				count:1,
				userid:123
			}
		},
		provide(){
			return{
				app:this
			}
		},
		methods:{
			changeapp(){
				this.count++
				console.log('changeapp12234')
			}
		}
	}
	
	
</script>

子组件

<template>
	<div>
		<h2 @click="about">about</h2>
		count--{{num}}
	</div>
	
</template>

<script>
	export default {
		name:'AboutView',
		inject:['app'],
		methods:{
			about(){
				console.log(this.app.userid)
				this.app.changeapp()
				// console.log()
			}
		},
		computed:{
			num(){
				return this.app.count
			}
		}
	}
	
	
	
</script>

<style>
</style>