1.组件间的双向绑定

1.1 组件的双向绑定的介绍

由于vue中的单项数据流，一般来说，父组件通过自定义属性传输数据，子组件通过props字段接受数据，如果子组件想要更改父组件传过来的数据，可以通过this.emit()自定义事件，然后在子组件上绑定自定义事件，然后父组件通过自定义事件的函数中的参数拿到数据；

但是如果能将适用于input标签的v-model使用在子组件上，也就是将组件看作为一个input框，是不是就能如input一般实现数据的双向绑定呢？

双向绑定：v-model是绑定value属性和绑定input事件双向指令的语法，v-model其实就是通过绑定input事件,绑定value属性,在input事件里面把变化之后的值重新赋值给双向绑定的字段；

1.2 组件的双向绑定的适用步骤

1. 在子组件的标签上使用v-model绑定父组件要传输的数据；

2. 子组件在props使用value(默认)接受v-model绑定的数据;

3. 子组件在事件触发函数中使用this.emit()自定义事件，第二个参数直接传输更改后数据；

4. 在子标签对中添加自定义事件及事件执行函数，在函数中更改数据的值；

1.3 代码演示

<div id="app"><!-- 双向绑定：v-model是绑定value属性和绑定input事件双向指令的语法，v-model其实就是通过绑定input事件,绑定value属性,在input事件里面把变化之后的值重新赋值给双向绑定的字段--><p>{{num1}}</p><input type="text" v-model="num1"><input type="text" :value="num1" @input="num1=arguments[0].target.value"><hr><!-- 组件双向绑定:让组件支持v-model指令,需要子组件接受value属性,并且在子组件添加事件发射,发射input事件 --><!-- <com type="text" :value="num1" @input="fun"> --><com type="text" :value="num1" @haa="num1=arguments[0]"><!-- <com v-model="num1"></com> -->
</div>

Vue.component('com', {template: `<div>{{value}}<button @click='add'>点击计算</button></div>`,props: ['value'],methods: {add() {this.$emit('haa', this.value + 1)},},
})new Vue({el: '#app',data: {num1: 10}, methods: {fun(v) {console.log(arguments);this.num1 = v;}},
})

2.定制双向绑定

2.1 定制双向绑定

在子组件中的model中添加prop属性和event属性；prop属性值使自定义属性；event属性值使自定义事件；

2.2 代码演示

<div id="app"><com v-model="count"></com><com :my-value="count" @myinput="count=arguments[0]"></com>{{count}}
</div>

Vue.component('com',{template:`<div><button @click='f1'>修改{{myValue}}</button></div>`,props:["myValue"],model:{// 可以在父子组件进行双向绑定的时候,自定义v-model的属性和事件名prop:"myValue", // 默认值是valueevent:"myInput", //默认的是input},methods: {                f1(){this.$emit('myinput',100)}},})new Vue({el:'#app',data:{count:12},methods:{},
})

组件间的双向绑定、如何自己定制双向绑定相关推荐

巧用v-model实现组件间数据双向绑定
在vue的开发中,我们常常会构造自定义组件,多个自定义组件组合至父级组件中,父子组件的通信方式基本是:父组件通过Prop向子组件传递数据.  <templat ...
Vue之组件间的双向绑定
何为组件间双向绑定我们都知道当父组件改变了某个值后,如果这个值传给了子组件,那么子组件也会自动跟着改变,但是这是单向的,使用v-bind的方式,即子组件可以使用父组件的值,但是不能改变这个值.组件间 ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
【JetPack】ViewBinding 视图绑定组件 ( 启用模块 | 视图绑定定制 | 绑定类名称生成规则 | 绑定类字段生成规则 | 绑定类获取根视图 | 绑定类获取布局组件 )
文章目录 I . 视图绑定组件简介 II . 视图绑定 ViewBinding 使用前提 ( Android Studio 3.6 ) III . 视图绑定组件启用 IV . 定制视图绑定 ( 启用视 ...
【Vue.js】vue2组件间通信方式总结
目录一.props传参 1.父组件 ==> 子组件 2.子组件 ==> 父组件二.组件的自定义事件三.全局事件总线四.消息订阅和发布五.vuex 六.插槽 1.默认插槽 2.具名 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
小程序第三讲组件间传值 props
小程序第三讲组件间传值 props 写在前面的话 props 传值上面提到的props方法跟vue同样适用结束语项目地址写在前面的话上一篇我们讲到了项目的上手,这一讲我们围绕着wepy(v ...
vue组件间通信的13种方式
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...

组件间的双向绑定、如何自己定制双向绑定