今天在用平时很少用到的传值方式，是V2.4以后新加入属性$attrs $listener 以及inheritAttrs.
总结：这样形式的代码适合套娃模式的组件传递，却不适合兄弟组件的传值，那样的传值方式，需要创建一个事件总线，说白了就是新new一个空的vue，详见，我的第二篇日志《vue 组件传值踩坑日记 2》
废话不多说，直接上代码，大家可以边看注释边测试一下效果吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<com1></com1>
</div>
<template id="com1">
<div>
<div>我是祖组件</div>
<br>
<span>我是修改后的祖组件数据:{{curTitle}}</span>
<com2 :g-msg="msg":g-title="title" @setTitle="setTitle"></com2>
</div>
</template>
<template id="com2">
<div>
<div>我是父组件</div>
<com3 v-bind="$attrs" v-on="$listeners"></com3>
</div>
</template>
<template id="com3">
<div>
<div>我是孙组件</div>
收到祖组件的数据：{{gTitle}}
<br>
<button @click="setPtitle">
发送给祖组件数据
</button>
</div>
</template>
<script src="/lib/vue/vue.js"></script>
<script>
var com3 = {
template: "#com3",
data() {
return {
title: "",
msg: "",
gTitle:‘‘,
};
},
mounted() {
this.gTitle = this.$attrs[‘g-title‘]//也可以不用定义新的属性，直接写$attrs[‘g-title‘]
console.log(‘孙组件‘,this.$attrs,this.$listeners);
},
methods: {
setPtitle(){
//这里的方法名大小写要注意一下，就是坑在这里，他一直给了黄色的提示但是我忽略了，后来打印输出了console.log，发现方法名是小写的,所以写成小写的方法名就OK了，网上很多这地方的方法名都和组件绑定那边写的大小写一致，按照那个运行怕是一万年也都是失败。。
this.$emit(‘settitle‘,‘收到，好好学习，天天向上‘);
}
},
};
var com2 = {
template: "#com2",
inheritAttrs:false,//这里如果写true或者是不写这句话，你可以很明显的看到你绑定的时候自定义的值（在网站查看DOM的时候会看到这个自定义属性和实际的值，不想让人看到的话写一下是OK的）
props:{
//这里是需要注意一下的，如果祖组件传递的属性在这里被声明了，那孙组件就获取不到了，因为被这里截断了，，感兴趣的可以解除这里的注释看看输出
// gMsg:{
// type:String
// },
// gTitle:{
// type:String
// }
},
data() {
return {};
},
mounted() {
console.log(‘父组件‘,this.$attrs)
},
components: {
com3
}
};
var com1 = {
template: "#com1",
data() {
return {
title: "你有新的消息",
msg: "改变自己，认知世界",
curTitle:‘‘
};
},
components: {
com2
},
methods: {
setTitle(msg) {
this.curTitle=msg;
}
}
};
new Vue({
el: "#app",
components: {
com1
}
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/llcdbk/p/12173515.html
时间： 2024-10-13 01:11:34