做了两个子组件，原理基本一样，一个是使用原生的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框架中一个强大的特性，它使得父子组件间的通信更为便捷，提高了代码的可维护性和复用性。本文将深入探讨Vue自定义组件双向绑定的实现原理与方法，以及如何改进组件设计，使其更易于使用...
本文主要探讨的是如何使用Vue自定义组件来封装数据字典，以下拉列表为例。 首先，使用Element UI的`el-select`组件可以直接创建下拉列表，但这种方式在处理多个字典数据时会变得复杂。因为每个字典都需要单独请求...
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。...通过上述介绍的原理和代码实现，相信开发者可以对Vue.js的双向绑定有了更深层次的认识，并在项目开发中灵活运用。
然而，Vue 的自定义组件也可以实现 `v-model` 的双向绑定，使得在自定义组件中使用 `v-model` 变得像使用内置组件一样方便。 在自定义组件中实现 `v-model` 双向绑定分为两种主要的方式： 1. **第一种方式**： - ...
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的...
Vue自定义组件是其核心特性之一，能够帮助开发者构建复杂的用户界面。本篇将详细介绍在Vue中如何自定义组件以及两种不同的调用方式。 首先，自定义组件的基本步骤包括创建组件模板、注册组件和在父组件中使用。在...
上篇文章给大家介绍了浅析Vue自定义组件的v-model，大家可以参考下。接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法，具体详情如下所示： 父子组件通信，都是单项的，很多...
在前端开发领域，Vue.js是一个极其流行的轻量级框架，以...通过以上讲解，你应该对如何在Vue中为自定义组件实现`v-model`双向绑定有了深入理解。熟练掌握这一特性，能帮助你在实际项目中构建更灵活、可维护的前端应用。
除了基础的文本输入，Vue还支持多种类型的双向绑定，如`v-model`可以与`checkbox`、`radio`、`select`等不同类型的表单元素配合使用，甚至支持自定义组件的双向绑定。 Vue的双向绑定极大地提高了开发效率，让开发者...
我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...
- 在Vue中，我们可以创建一个名为`Switch`的组件，用`v-model`来双向绑定其值，这样可以轻松地在组件与父组件之间传递状态。 3. **项目结构分析** - `index.html`: 这是项目的入口文件，通常包含`<div id="app">...
总之，解决Vue双向绑定失效的问题需要开发者全面掌握Vue的工作原理，了解组件的内部机制，并结合具体问题采取相应的策略。通过不断的实践和学习，我们将能够更有效地利用Vue.js提供的强大功能，构建稳定和高效的前端...
总结起来，`sync`修饰符是Vue中处理子组件修改父组件prop的一种有效方法，它通过自定义事件实现了数据的“双向绑定”效果。通过理解其工作原理，开发者可以在保持单向数据流的同时，灵活地在组件间同步数据。在实际...
6. **事件系统**：在表单元素上，Vue使用自定义事件来实现数据的双向绑定。例如，`v-model`在输入框中监听`input`事件，当用户输入时触发该事件，更新数据模型。 在`myvue`这个示例中，可能会包含一个简单的Vue组件...
总之，Vue2xUEditorvmodel双向绑定是一个将Vue的数据驱动特性应用到UEditor的实践，通过自定义组件和事件监听，实现了Vue实例与UEditor之间的双向数据同步。在实际开发中，这可以极大地简化富文本编辑器与Vue应用...
"解决Vue2.x父组件与子组件之间的双向绑定问题" Vue.js是一款流行的前端框架，它提供了强大的组件化和数据绑定机制。但是，在使用Vue时，开发者经常遇到的一问题就是父组件与子组件之间的双向绑定问题。双向绑定是...
`vue-dialog`就是一个用于创建此类自定义弹窗的组件库，它支持回调功能，能够很好地与Vue实例进行通信，实现数据的双向绑定。 `vue-dialog`的核心特点是可配置性和灵活性，允许开发者自定义弹窗的样式、内容和行为...
总之，在Vue2中，我们可以通过创建props的副本并配合`watch`或`v-model`来模拟实现组件props的双向绑定，但这并不意味着我们应该频繁地在组件内部修改props。在大多数情况下，遵循单向数据流原则可以使应用的数据流...