老师，this.$emit('update:count_',this.count_+2)这句话啥意思，为啥第二个参数这么写count就能加2
来源：1-7 父子组件间如何通过事件进行通信（2）
母鸡阿
2021-06-25 00:35:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件双向绑定高级内容</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count:1,
str:'aaa'
}
},
//v-model: :是重命名，原本子组件接收参数是用modelValue，重命名后用重命名的名字接收
template: `<div><counter v-model:count_="count" v-model:str_.uppercase="str" /></div>`,
});
app.component('counter',{
props:{
'count_' : Number,
'str_': String,
//str_的修饰符
'str_Modifiers' : {
// default: () => ({})
}
},
template:`
<div @click="countAdd">{{count_}}</div>
<div @click="str">{{str_}}</div>
`,
methods:{
countAdd(){
this.$emit('update:count_',this.count_+2)
},
str(){
let newStr = this.str_ + 'b';
newStr = newStr.toUpperCase();
if(this.str_Modifiers.uppercase){
this.$emit('update:str_',newStr);
}
}
}
})
const vm = app.mount('#root');
</script>
</html>
1回答
-
好帮手慕慕子
2021-06-25
同学你好，对于你的问题解答如下：
1、这句代码的意思是触发update:count_事件，然后将this.count_+2作为参数传递给这个事件，可以在组件上绑定这个事件update:count_，对应事件函数名为test，如下：
每次点击组件时，都会触发update:count_，输出传入的值，如下：
2、因为每次执行this.$emit('update:count_', this.count_ + 2)这句代码时，会将count_值加2， 而vue语法中规定的，组件上书写的v-model:count_="count" 这句代码，将count_和count进行了双向绑定，所以当count_的值改变时，count也会跟着改变。
老师在视频最后也提到过，这块理解起来可能会比较难，同学们如果可以理解的话，就尝试去理解下，如果理解不了，也不用担心，实际开发中，这种方式很少使用到，了解一下就可以了。
祝学习愉快~
0
相似问题