四、Vue 组件通信方式之$attrs 、$listener

$attrs 、$listener
1、$attrs
用来接收父作用域中不作为prop被识别的attribute属性,并且可以通过v-bind="$attrs"传入内部组件–在创建高级别的组件时非常有用。
如果创建组件,要接收一堆参数时,通过props,需要声明一堆。如果这些pros还有一些需要往更深层次的子组件传递,将会比较麻烦。
使用$attrs,不需要任何声明,直接通过$attrs.params1$attrs.params2$attrs.params3。。。就可以使用。

// 父组件A
<template>
  <div class="compA">
    <h3>这是组件A</h3>
    <input type="text" v-model="msg" />
    <p>收到来自{{ comp }}的消息:{{ msgComp }}</p>
    <CompB :msgFromA="msg" :name="name" @keyup="receive" />  <!--监听子孙组件的keyup事件,将msg传递给子孙组件-->
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  data() {
    return {
      msg: '',
      msgComp : '',
      comp: '',
      name:'这是name值'
    }
  },
  components: {
    CompB,
  },
  methods: {
    receive(e) { // 监听子孙组件keyup事件的回调,并将keyup所在input输入框的值赋值给messageFromComp
      this.comp = e.target.name
      this.msgComp = e.target.value
    },
  },
}
</script>

子组件须加上v-bind=“$attrs”,孙组件才能接收上数据。另外 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性就加上inheritAttrs: false,为true时是继承所有父组件的值,与data同级别。注意,不想传递给孙组件某个属性,需要子组件用props接收。

// 子组件B
<template>
  <div class="compb">
    <h4>这是子组件B</h4>
    <input name="compB" type="text" v-model="msg" v-on="$listeners" />  <!--A组件keyup的监听回调绑在该input上-->
    <p>收到来自A组件的消息:{{ $attrs.msgFromA }}</p>
    <CompC v-bind="$attrs" v-on="$listeners" />
     <!--A组件keyup的监听回调继续传递给C组件,将A组件传递的attrs继续传递给C组件-->
  </div>
</template>
<script>
import CompC from './compC'
export default {
  name: 'CompB',
  components: {
    CompC,
  },
  inheritAttrs: true,
  //父组件传递了两个值,一个被props接收name,故$attr只有msgFromA
  props:['name'],
  data() {
    return {
      msg: '',
    }
  },
}
</script>

孙组件可以通过$attrs.msgFromA获取到组件A的msg。另外通过props来接收组件A 的值,

// 孙组件C
<template>
  <div class="compc">
    <h5>这是孙组件C</h5>
    <input name="compC" type="text" v-model="msg" v-on="$listeners" /> <!--A组件keyup的监听回调绑在该input上-->
    <p>收到来自A组件的消息1{{ msgFromA }}</p>
   //或
    <p>收到来自A组件的消息2{{ $attrs.msgFromA }}</p>
  </div>
</template>
<script>
export default {
  name: 'Compc',
  data() {
    return {
      msg: '',
    }
  },
  inheritAttrs: false,
  props:{
  msgFromA :String
  }
}
</script>

2、 $listeners
包含父作用域中的(不含.native修饰器)v-on事件监听器。可以通过v-on=“$listeners”传入内部组件——在创建多层次的组件时非常有用,这里在传递是与$attrs非常类似。
就是接收除了带有.native事件修饰符的所有事件的监听器。

//父组件
<template>
	<div>
		<Son @funOne="getInfo" @funTwo="eventHander" @click.native="clickModule"></Son>
	</div>
</template>
<script>
	import Son from './Son ';
	export default{
		components: {
		    Son,
		},
		methods:{
			getInfo(){},
			eventHander(){},
			clickModule(){},
		}
	}
</script>
//
//子组件
<template>
	<div>
	//子组件通过v-on="$listerners"把父组件传递来的监听器,传给孙组件
		<Grandson v-on="$listerners"></Grandson>
	</div>
</template>
<script>
	import Grandson from './Grandson';
	export default{
		components: {
		    Grandson,
		},
		mounted(){
		//console.log(this.$listerners)//{getInfo:fn,eventHander:fn}	
		},
		methods:{
			setData(){
				this.$emit('funOne',"这是可以触发传递给父组件的值")
			}
		}
	}
</script>

//孙组件
//子组件
<template>
	<div>
		这是孙组件块
	</div>
</template>
<script>
	export default{
		mounted(){
		//console.log(this.$listerners)//{getInfo:fn,eventHander:fn}	
		},
		methods:{
			setData(){
				//同样可以触发给父组件
				this.$emit('funOne',"这是可以触发传递给父组件的值")
			}
		}
	}
</script>
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值