做了两个子组件，原理基本一样，一个是使用原生的select元素，一个是使用element-ui的el-select组件。并实现了子组件的value属性值到父组件的双向绑定，以及一些属性值的单向绑定。
<!DOCTYPE html>
<!--
自定义组件学习，wallimn，20190308
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义组件学习</title>
<!-- 引入组件样式 -->
<link rel="stylesheet" href="../res/lib/element-ui.v2.4.9/theme-chalk/index.css">
</head>
<body class="main">
<div id="app">
<div>自定义组件示例(element-ui组件封装)1：<agent-select1 :options="agents" v-model="selectAgent1" placeholder="请选择代理商"></agent-select1>选择代理商：{{selectAgent1}}</div>
<div>自定义组件示例(原生组件封装)2：<agent-select2 :options="agents" v-model="selectAgent2" placeholder="请选择代理商"></agent-select2>选择代理商：{{selectAgent2}}</div>
</div>
<script type="text/javascript" src="../res/lib/vue.js"></script>
<script src="../res/lib/element-ui.v2.4.9/index.js"></script>
<!--agent-select1===定义开始===-->
<!--组件模板-->
<script type="text/x-template" id="t-agent-select1">
<el-select :value="localValue" @input="updateVal($event)" :placeholder="placeholder" clearable>
<el-option
v-for="v in options"
:key="v.value"
:label="v.label"
:value="v.value">
</el-option>
</el-select>
</script>
<!--组件定义-->
<script type="text/javascript">
Vue.component("agent-select1",{
template:"#t-agent-select1",
props:["value","options","placeholder"],//通过props实现数据到子组件的传递
data: function(){
return {
localValue:""
};
},
methods :{
updateVal: function(val){
this.$emit("input",val);//通过事件实现组件属性到父组件的传递
this.localValue=val;
}
}
});
</script>
<!--agent-select1===定义结束===-->
<!--agent-select2===定义开始===-->
<script type="text/x-template" id="t-agent-select2">
<select v-model="localValue" @input="updateVal($event.target.value)" :placeholder="placeholder">
<option v-for="v in options" :key="v.value" :value="v.value">{{v.label}}</option>
</select>
</script>
<script type="text/javascript">
Vue.component("agent-select2",{
template:"#t-agent-select2",
props:["options","value","placeholder"],//通过props实现数据到子组件的传递
data: function(){
return {localValue:null}
},
methods: {
updateVal: function(val){
this.localValue=val;
this.$emit("input",val);//通过事件实现组件属性到父组件的传递
}
}
});
</script>
<!--agent-select2===定义结束===-->
<script type="text/javascript">
// Vue实例化
new Vue({
el:"#app",
data: {
selectAgent1:"",//组件1选中值
selectAgent2:"",//组件2选中值
agents:[
{value:"",label:""},
{value:1,label:"代理商01"},
{value:2,label:"代理商02"},
{value:3,label:"代理商03"},
{value:4,label:"代理商04"}
]//代理商列表
}
});
</script>
</body>
</html>
分享到：
相关推荐
主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue自定义组件实现v-model双向绑定数据的实例代码 项目中会遇到自定义公共组件供项目调用，正常情况可以使用 props定义参数接收父组件传的参数，然后通过子组件的$emits()方法回传数据给父组件。 类似如下： 父...
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的...
上篇文章给大家介绍了浅析Vue自定义组件的v-model，大家可以参考下。接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法，具体详情如下所示： 父子组件通信，都是单项的，很多...
我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...
关于前端开发框架vue中的v-model双向绑定自定义组件（第二版）
今天小编就为大家分享一篇解决VUE双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟…官方教程写得不是很详细，所以我决定总结一下。 v-model语法糖 v-model实现了表单输入的双向绑定，我们一般是这么写的： <...
vue自定义全局弹出询问框、输入框、提示框、toast，main.js引用后全局使用，涉及遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定、组件注册
主要介绍了解决Vue2.x父组件与子组件之间的双向绑定问题,需要的朋友可以参考下
实现思路 1、显示部分为一个输入框和一个下拉选择按钮，父级是一个div容器，采用 display:flex;justify-content: space-between;让两端靠边对齐 2、下拉选择按钮用css画一个向下的...5、用v-model实现数据双向绑定
v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向...
自定义属于自己的弹出窗，涉及到技术点：遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定，适合初学者研究学习使用
用途：一般用于系统管理中多选角色，涉及 1、css样式：flex布局，postion之absolute，relative，画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值
vue.js如何实现数据的双向绑定呢？ 与angular不同。 vue利用的是es5的defineproperty特性。 1.一个小例子 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title><...
自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖： <input v-bind:value="something" v-...
下面的例子就是利用了父组件传给子组件（在子组件定义props属性，在父组件的子组件上绑定属性），子组件传给父组件（在子组件使用$emit()属性定义一个触发方法，在父组件上的子组件监听这个事件）。 import Vue ...