vue 自定义组件 v-model

官方的介绍讲得比较全，这里就省去复制粘贴的步骤了。此处模拟一种非表单元素的 v-model 组件：

类似复选框，在组件里点选不同的选项，然后能跟父组件双向绑定。

1. 首先做好基础的排版及样式

<template><div style="padding:10px"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</template><style scoped>span{display: inline-block;width: 80px;height: 30px;line-height: 30px;border-radius: 4px;border: 1px solid #333;color: #333;text-align: center;}span.active{border-color: #f45619;color: #f45619;}
</style>

2. 添加 model 属性

根据文档内容，v-model 需要两个属性：value、event，一个用来传值（父传子），一个用来接收并赋值（子传父）。

<inputv-bind:value="searchText"v-on:input="searchText = $event.target.value"
>

我们定为 val、change 以示区分

<script>export default {model:{prop:'val',event:'change'},// val 这个值本身是不存在的，所以需要通过 props 定义
  props:{val: Array,},};
</script>

3. 接下来，我们把数据进一步处理，通过 computed 计算属性操作父组件传过来的值。val 为 0,1,2,3 中的值组成的数组，如：[ 1,3 ]。通过 computed 转换为 list : [ 0,1,0,1]

<template><div style="padding:10px"><span :class="{'active':list[0]}" >1</span><span :class="{'active':list[1]}" >2</span><span :class="{'active':list[2]}" >3</span><span :class="{'active':list[3]}" >4</span></div>
</template><script>export default {model:{prop:'val',event:'change'},// val 这个值本身是不存在的，所以需要通过 props 定义
  props:{val: Array,},computed:{list(){let arr = []this.val.forEach(i=>{let n = parseInt(i)arr[n] = 1})return arr}},
};
</script><style scoped>span{display: inline-block;width: 80px;height: 30px;line-height: 30px;border-radius: 4px;border: 1px solid #333;color: #333;text-align: center;}span.active{border-color: #f45619;color: #f45619;}
</style>

4. 到这里实现了单向的绑定，然后根据子组件的事件操作给父组件传值。通过子组件的点击事件触发父组件的事件提交，并把新值带给父组件

<template><div style="padding:10px"><span :class="{'active':list[0]}" @click="onTap(0)">1</span><span :class="{'active':list[1]}" @click="onTap(1)">2</span><span :class="{'active':list[2]}" @click="onTap(2)">3</span><span :class="{'active':list[3]}" @click="onTap(3)">4</span></div>
</template><script>export default {model:{prop:'val',event:'change'},// val 这个值本身是不存在的，所以需要通过 props 定义
  props:{val: Array,},computed:{list(){let arr = []this.val.forEach(i=>{let n = parseInt(i)arr[n] = 1})return arr}},methods:{onTap(n){console.log(n)let list = this.listlist[n] = !list[n]let res = []list.map((i, idx)=>{if(i) res.push(idx)})// 注意// 此处的 change ，来自一开始定义在 model 属性里的event　　　 // 父组件在接收到传过来的新值后，会用这个新值更新 val 属性，这样就会更新了自组件的值，完成双向绑定的过程      this.$emit('change',res)    } }

};
</script><style scoped>span{display: inline-block;width: 80px;height: 30px;line-height: 30px;border-radius: 4px;border: 1px solid #333;color: #333;text-align: center;}span.active{border-color: #f45619;color: #f45619;}
</style>

5. 父组件引用：

// 父组件
<template><div class="hello"><hello v-model="value"></hello></div>
</template><script>
import hello from '@/components/model'
export default {components:{ hello },data () {return {value:[1,3],}},
}
</script>

参考官方文档：

在组件上使用 v-model 、 自定义组件的 v-model

转载于:https://www.cnblogs.com/_error/p/10345275.html

vue 自定义组件 v-model相关推荐

vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue自定义组件及定义插槽
vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...

vue 自定义组件 v-model

vue 自定义组件 v-model相关推荐

最新文章

热门文章