何为组件间双向绑定

我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值。组件间的双向绑定就是对于父组件的变更，子组件可以感知到，同样对于子组件的变更，父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用v-model来实现

示例解析

这里我们还是以一个计数器组件来介绍Vue的双向绑定，我们定义一个Div显示一个数，当我们点击这个数的时候，让这个数加1，代码如下：

<!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}},methods:{handleCountOneChange(count){this.count = count;}},template: `<div><counter v-model:count = "count"  @change-count-one="handleCountOneChange"/></div>`});app.component('counter',{props:['count'],methods: {handleItemClick(){this.$emit('change-count-one',this.count + 1);},},template:`<div @click="handleItemClick">{{count}}</div>`});const vm = app.mount('#root');
</script>
</html>

在之前我们要将父组件传过来的值做加一操作的时候，由于是单向数据流，我们只能把父组件传来的值先拷贝一份到子组件，然后让子组件去改变自己的这个值来达到子组件的计数效果，本节所讲的双向数据绑定可以在子组件中将这个值加一后传到父组件，父组件收到这个值以后又会同步给子组件，这样就完成了一个计数器。如上面代码所示，父组件通过v-model的方式将count传给子组件，子组件收到这个值后，当用户点击了div后，就会执行handleItemClick方法，这个方法会通过事件的方式，将count+1的值通知给父组件，父子组件由于是双向绑定的，所以这个count的值又会被子组件感知到然后子组件就显示了count+1 的值了，如此循环，点击一次，值就加一。就完成了counter组件的计数功能了。

这里需要注意的是，父组件传递值的时候用法是： v-model:count = "count" 不要忘记后面的“:count”少了是无法显示的

那假设我们不想使用:count的方式呢，那就可以用指定的一个关键字modelValue代码如下：

<!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}},methods:{handleCountOneChange(count){this.count = count;}},template: `<div><counter v-model = "count"  @change-count-one="handleCountOneChange"/></div>`});app.component('counter',{props:['modelValue'],methods: {handleItemClick(){this.$emit('change-count-one',this.modelValue + 1);},},template:`<div @click="handleItemClick">{{modelValue}}</div>`});const vm = app.mount('#root');
</script>
</html>

注意此处只能叫modelValue,其他的名字都不可以

总结

其实本文的内容非常简单，就是使用v-model来实现vue组件之间的双向绑定，这里面有个事件的概念，就是 this.$emit('change-count-one',this.count + 1);这个，这个可以理解成一个事件通过$emit()发送,父组件通过@change-count-one="handleCountOneChange"去监听，然后执行对应的操作。这个下次讲。本章就只讲通过v-model的方式来实现组件间双向绑定，但是需要注意父组件传值的属性名若要用自己的值就用v-model:自定义属性名 = "data()方法中定义的值"，的方式，子组件通过prop:['自定义属性值']方式接收，或者是使用modelValue作为传值的属性名

Vue之组件间的双向绑定相关推荐

组件间的双向绑定、如何自己定制双向绑定
1.组件间的双向绑定 1.1 组件的双向绑定的介绍由于vue中的单项数据流,一般来说,父组件通过自定义属性传输数据,子组件通过props字段接受数据,如果子组件想要更改父组件传过来的数据,可以通过t ...
巧用v-model实现组件间数据双向绑定
在vue的开发中,我们常常会构造自定义组件,多个自定义组件组合至父级组件中,父子组件的通信方式基本是:父组件通过Prop向子组件传递数据.  <templat ...
Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框
最简单的Input的封装 HtmlInput.vue <template><div><input :value="value" @input=&quo ...
Vue自定义组件数组型双向绑定
実践发现,对于数组类型,使用.sync不能実现双向绑定. 只能通过@方法的方式来実现.
vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
uniapp 扫描枪获取条码不全解决办法，vue组件，使用双向绑定，回车事件触发，获取文本不全问题
原因分析: uniapp使用vue,双向绑定组件,在input标签loop事件循环获取文本的过程中,读取文本信息不是顺序读取,如果条码中包含了回车键,比如扫描枪,扫描文本后会追加回车键,监控文本读取还 ...

Vue之组件间的双向绑定

何为组件间双向绑定

示例解析

总结

Vue之组件间的双向绑定相关推荐

最新文章

热门文章