vue进阶之vm.$attrs/$listeners
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div class="home">
<div>{{title}}</div>
<mytest :title="title" :massgae="massgae" :xixi='xixi'></mytest>
</div>
<script>
var vm = new Vue({
el: '.home',
data: {
title:'title1111',
massgae:'message111'
},
computed: {
xixi: function () {
return 'xixi'
}
},
components:{
'mytest':{
template:`<div>这是个h1标题{{title}}</div>`,
props:['title'],
data(){
return{
mag:'111'
}
},
created:function(){
console.log('>>>>>>>>>>>', this.$attrs)//注意这里
}
}
}
})
</script>
</body>
</html>
打印出来
>>>>>>>>>>> {massgae: "message111", xixi: "xixi"}
继承父组件没有使用的属性，就算当前组件没有通过props传递进来，当前组件依然可以通过$atrrs取到message的值。
但是必须要属性传递
组件内未被注册的属性将作为普通html元素属性被渲染
在Vue2.4.0,可以在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性，如果需要，我们在这也可以往下继续传递。
重点 穿透属性传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div class="home">
<div>{{title}}</div>
<Component-b :massgae='massgae'></Component-b>
<mytest :title='title' :massgae='massgae'></mytest>
</div>
<script>
var vm = new Vue({
el: '.home',
data: {
title:'title1111',
massgae:'message111'
},
computed: {
xixi: function () {
return 'xixi'
}
},
components: {
'ComponentB': {
template: `<div>B<component-c v-bind="$attrs"></component-c></div>`,
// inheritAttrs: false,
components: {
'ComponentC': {
props: ['massgae'],
template: '<div>C{{massgae}}</div>',
created:function(){
console.log('>>>>>>>>>>>', this.massgae)//注意这里
}
}
}
}
}
// components:{
// 'mytest':{
// template:`<div>这是个h1标题{{title}}</div>`,
// props:['title'],
// inheritAttrs: false,
// data(){
// return{
// mag:'111'
// }
// },
// created:function(){
// console.log('>>>>>>>>>>>', this.$attrs)//注意这里
// }
// }
// }
})
</script>
</body>
</html>
只需要中间组件 调用孙子组件的时候传递一个 v-bind=‘$attrs’ 孙子组件就可以直接 props[] 接受 也可以 this.$attrs[属性名字] //1.父元素必须传递元素 //中间元素props过的属性 就不会传递下去
关于继承属性开关 还是很有用的
// inheritAttrs: false, //父作用域调用子组件 子组件内部有模板 那么父组件传递的属性 会覆盖子组件标签上的属性 这就是继承
$listeners
这个用法和$attrs正好相反 是像外触发事件的中间层绑定一个 v-on='listeners'就可以了
<template>
<div>
<childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom>
</div>
</template>
<script>
export default {
'name':'test',
props:[],
data(){
return {
'name':'张三',
'age':'30',
'sex':'男'
}
},
components:{
'childcom':{
props:['name'],
template:`<div>
<div>我是子组件 {{name}}</div>
<grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
</div>`,
components: {
'grandcom':{
template:`<div>我是孙子组件-------<button @click="grandChangeName">改变名字</button></div>`,
methods:{
grandChangeName(){
this.$emit('testChangeName','kkkkkk')
}
}
}
}
}
},
methods:{
changeName(val){
this.name = val
}
}
}
</script>
’
listeners
本人是一个技术爱好者
1.但是每个技术爱好者都是从萌新开始的
2.我所有的博文都是我各方资料查阅（看的比较乱比较杂，因为有些是群里讨论等等来源，无法辨别出处，所以我的文章都是没有写明出处，都是我个人消化后整理，）
3.但是没有经过我实践的我一般会标注
4.希望大家共同交流共同进步，指出我的不足 谢谢
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构