关于网站建设的问卷分析,台州cms模板建站,赶集网免费发布信息网,房产网签查询何为组件间双向绑定
我们都知道当父组件改变了某个值后#xff0c;如果这个值传给了子组件#xff0c;那么子组件也会自动跟着改变#xff0c;但是这是单向的#xff0c;使用v-bind的方式#xff0c;即子组件可以使用父组件的值#xff0c;但是不能改变这个值。组件间的…何为组件间双向绑定
我们都知道当父组件改变了某个值后如果这个值传给了子组件那么子组件也会自动跟着改变但是这是单向的使用v-bind的方式即子组件可以使用父组件的值但是不能改变这个值。组件间的双向绑定就是对于父组件的变更子组件可以感知到同样对于子组件的变更父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用v-model来实现
示例解析 这里我们还是以一个计数器组件来介绍Vue的双向绑定我们定义一个Div显示一个数当我们点击这个数的时候让这个数加1代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title组件间双向绑定/titlescript srchttps://unpkg.com/vuenext/script
/head
bodydiv idroot/div
/body
scriptconst app Vue.createApp({data() {return {count:1}},methods:{handleCountOneChange(count){this.count count;}},template: divcounter v-model:count count change-count-onehandleCountOneChange//div});app.component(counter,{props:[count],methods: {handleItemClick(){this.$emit(change-count-one,this.count 1);},},template:div clickhandleItemClick{{count}}/div});const vm app.mount(#root);
/script
/html在之前我们要将父组件传过来的值做加一操作的时候由于是单向数据流我们只能把父组件传来的值先拷贝一份到子组件然后让子组件去改变自己的这个值来达到子组件的计数效果本节所讲的双向数据绑定可以在子组件中将这个值加一后传到父组件父组件收到这个值以后又会同步给子组件这样就完成了一个计数器。如上面代码所示父组件通过v-model的方式将count传给子组件子组件收到这个值后当用户点击了div后就会执行handleItemClick方法这个方法会通过事件的方式将count1的值通知给父组件父子组件由于是双向绑定的所以这个count的值又会被子组件感知到然后子组件就显示了count1 的值了如此循环点击一次值就加一。就完成了counter组件的计数功能了。 这里需要注意的是父组件传递值的时候用法是 v-model:count count 不要忘记后面的“:count”少了是无法显示的
那假设我们不想使用:count的方式呢那就可以用指定的一个关键字modelValue代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title组件间双向绑定/titlescript srchttps://unpkg.com/vuenext/script
/head
bodydiv idroot/div
/body
scriptconst app Vue.createApp({data() {return {count:1}},methods:{handleCountOneChange(count){this.count count;}},template: divcounter v-model count change-count-onehandleCountOneChange//div});app.component(counter,{props:[modelValue],methods: {handleItemClick(){this.$emit(change-count-one,this.modelValue 1);},},template:div clickhandleItemClick{{modelValue}}/div});const vm app.mount(#root);
/script
/html注意此处只能叫modelValue,其他的名字都不可以
总结
其实本文的内容非常简单就是使用v-model来实现vue组件之间的双向绑定这里面有个事件的概念就是 this.$emit(change-count-one,this.count 1);这个这个可以理解成一个事件通过$emit()发送,父组件通过change-count-onehandleCountOneChange去监听然后执行对应的操作。这个下次讲。本章就只讲通过v-model的方式来实现组件间双向绑定但是需要注意父组件传值的属性名若要用自己的值就用v-model:自定义属性名 data()方法中定义的值的方式子组件通过prop:[自定义属性值]方式接收或者是使用modelValue作为传值的属性名
