欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue自定义组件并双向绑定属性

程序员文章站 2022-06-07 10:42:51
...
  做了两个子组件,原理基本一样,一个是使用原生的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 element-ui