mounted 只调用了两次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.prototype.bus = new Vue()
Vue.component('child', {
data() {
return {
selftContent:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{selftContent}}</div>',
methods:{
handleClick() {
this.bus.$emit('change', this.selftContent)
}
},
mounted(){
console.log('outer');
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
页面加载的时候，console.log('outer'); 打印了两个 outer
这个我可以理解，mounted 函数被调用了两次， 因为父组件里头我们用了两个子组件。 我每一次点击 子组件的时候，根本没打印出来 outer, 也就是说 mounted 函数根本没被调用，但是， 打印了两个 inner，也就是说 mounted方法里面的
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
执行了两次
点击Dell 或者Lee的时候， 可以看到变化， Lee 变成 Dell 或者Dell 变成Lee。
我要问的问题是 mounted 这个函数除了第一次页面加载的时候被调用以外， 我点击子组件的时候没被调用， 但是 这个mounted函数里面的
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
这部分代码都执行了
这个怎么理解？
2 . 子组件里头我为什么要用mounted， mounted 这个函数页面刚加载的时候只被调用一次， 我可以这么理解吗？
那我们点击子组件的时候，我们希望有变化， 那我们为什么不用 beforeUpdate,update 这样数据更改的时候用的的函数呢？
2011
收起
正在回答 回答被采纳积分+3
1回答
Dell
2021-01-05 00:28:39
-
on是绑定事件，事件只需要绑定一次。绑定之后，事件的回调在事件每次被触发时都会执行。事件建议同学看下基础js的内容
有任何疑惑可以回复我~ 2021-01-09 11:20:57 -
这点我知道， 可能我表达的不清楚吧， mounted 函数只执行一次， 后面页面有任何变化它不会再执行，但是它里面的代码 ，每次点击，都执行（这是不是冲头） 我每次点击子组件我希望页面有变化，每次点击 this.bus.$on.... 这个函数执行一次， 这样的情况下， 我可以把 this.bus.$on.....写在别的地方吗?
有任何疑惑可以回复我~ 2021-01-09 12:54:13
点开查看后面2条评论
相似问题
axios调用detial的接口时会同时调用两次
1020
0
4
在created还是mounted钩子请求数据的问题
1693
0
3
useEffect调用接口时 是不是所有的接口都要调用两次
198
0
5
登录后可查看更多问答，登录/注册
Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战
- 参与学习 10661 人
- 提交作业 574 份
- 解答问题 8190 个
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
