个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在vue js文档中，有一种非父子组件之间通信的方法。 vue document 。但当我尝试这个方法时，它不起作用。下面是我的代码。有什么帮助吗？
html 页面:
<html>
<body>
<div id="app10">
<component3 :id="id"></component3>
<component4 :id="id"></component4>
</div>
</body
</html>
js脚本:
var bus = new Vue();
Vue.component('component3', {
template: `
<div @click='change'>
{{id}}
</div>
`,
props: ['id'],
methods: {
change() {
console.log('??? component3 emit');
bus.$emit('idSelected', 3);
}
},
mounted() {
}
});
Vue.component('component4', {
template: `
<div>
{{id}}
</div>
`,
props: ['id'],
});
var app10 = new Vue({
el: '#app10',
data: function() {
return {
id: '?'
}
},
mounted() {
bus.$on('idSelected', function(value) {
console.log('??? app10 click event value: ', value);
this.id = value;
console.log('??? this.id', this.id);
});
},
methods: {
}
});
我想要做的是:当我点击组件3时，它的文本内容应该从“问号？”改变到“3号”。但这不起作用。即使父数据中的“id”更改为“3”，子 props 的“id”也根本没有改变。为什么？
控制台输出:
??? component3 emit
??? app10 click event value: 3
??? this.id 3
最佳答案
这是一个范围界定问题。按如下方式调整 mounted Hook :
mounted() {
const self = this; // save pointer to current 'this'
bus.$on('idSelected', function(value) {
console.log('??? app10 click event value: ', value);
self.id = value; // use 'self' here
console.log('??? this.id', this.id);
});
}
否则您将丢失对当前“this”的引用，因为它等于事件监听器中的“bus”。尝试在监听器中使用 console.log(this === bus) ( == true)。
关于javascript - Vue js非子父级与事件总线的通信不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44624855/
25
4
0
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？ 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀！