用vue.js組件模擬v-model指令實例方法

更新時間：2019年07月05日 15:01:25 作者：翱翔天地

在本篇文章里小編給各位整理的是關于用vue.js組件模擬v-model指令實例方法和相關代碼，需要的朋友們可以跟著學習下。

1、問題描述

在使用v-model指令實現(xiàn)輸入框數(shù)據雙向綁定，輸入值時對應的這個變量的值也隨著變化；但是這里不允許使用v-model，需要寫一個組件實現(xiàn)v-model指令效果

<div id="user">
  <input type="text" v-model="username">
  <label>{{username}}</label>
</div>
 
<script>
  let v = new Vue({
    el:'#user',
    data:{
     username:'zhangsan'
    }
  })
</script>

2、實現(xiàn)源碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue模擬v-model指令</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="datas">
			<input-model :value="num" @inputchange="num=arguments[0]"></input-model>
			<br>
			<span>
				{{num}}
			</span>
		</div>
		<script>
			Vue.component('input-model',{
				template:`<input type="text" :svalue="cvalue" @input="updateInput">`,
				computed: {
					cvalue() {
						return this.svalue 
					}
				},
				props:['svalue'],
				methods: {
					updateInput: function(event){
						let values = event.target.value
						this.$emit('inputchange',values)
					}
				}
			});
			
			let v = new Vue({
				el:'#datas',
				data: {
					num:'1'
				}
			})
		</script>
	</body>
</html>

3、注意事項

（1）父組件中使用子組件，綁定的inputchange必須小寫，不能使用inputChange；

（2）子組件中的cvalue和計算屬性中的要保持一致；

（3）子組件中的@input和父組件中的@inputchange沒有必然關系；

（4）this.$emit('inputchange',values)中的inputchange要和DOM元素中的input-model一致

（5）父組件將num值通過props屬性傳到子組件中；子組件通過$emit觸發(fā)當前實例上的事件，將改變的值傳給父組件

內容擴展：

vue.js指令v-model實現(xiàn)方法

V-MODEL 是VUE 的一個指令，在input 控件上使用時，可以實現(xiàn)雙向綁定。

通過看文檔，發(fā)現(xiàn)他不過是一個語法糖。

實際是通過下面的代碼來實現(xiàn)的：

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
 <div id="app-6">
 <input :value="person.name" @input="person.name = $event.target.value">
 <input :value="person.age" @input="person.age =$event.target.value">
 {{person}}
 </div>
 <script type="text/javascript">
 var app =new Vue({
 el: '#app-6',
 data:{
 person:{name:"ray",age:19}
 }
 })
 </script>
</body>
</html>

您可能感興趣的文章: