首頁 > 軟體

Vue父子元件資料雙向繫結（父傳子、子傳父）及ref、$refs、is、：is的使用與區別

2022-12-25 14:00:47

既然有父傳子那麼肯定有子傳父，有子傳父肯定也有兩者之間相互繫結

這裡我們先看一下子傳父的寫法：

一、子傳父：$emit()

看程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子傳父</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<style type="text/css">
		button {
			margin-left: 5px;
		}
	</style>
	<body>
		<div id="app">
			<cpn1 @itemclick="cpnclick"></cpn1>
		</div>
		<template id="cpn1">
			<div>
				<button type="button" v-for="item in menu" :key="item.id"
					@click="btnclick(item)">{{item.name}}</button>
			</div>
		</template>
		<script type="text/javascript">
			const cpn = {
				template: "#cpn1",
				data() {
					return {
						menu: [{
								id: 'one',
								name: '首頁'
							},
							{
								id: 'two',
								name: '分類'
							},
							{
								id: 'three',
								name: '購物'
							},
							{
								id: 'four',
								name: '我的'
							},
						],
					}
				},
				methods: {
					btnclick(item) {
						this.$emit('itemclick', item)
// 子傳父 在子元件中做一個點選事件通過$emit派發出 給父元件 同時可以攜帶引數
					}
				}
			};
			const vm = new Vue({
				el: '#app',
				methods: {
					cpnclick(item) {
						console.log('cpnclick' + item.name);
					}
				},
				components: {
					"cpn1": cpn
				}
			})
			
		</script>
	</body>
</html>

列印效果：

兩者之間的關係： 

 1、父元件可以使用 props 把資料傳給子元件。
2、子元件可以使用 $emit 觸發父元件的自定義事件。

二、監聽原生點選事件：.native 

不加.native時，不會觸發原生的點選事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>不加native修飾符</title>
	</head>
	<style>
		div{
			cursor: pointer;
		}
	</style>
	<body>
		<div id="app">
          <cpn @click="handelClick"></cpn>    //    這裡沒有加native修飾符
		</div>
		<!-- 子元件 -->
		  <template id="cpn">
		    <div>
		      我是子元件
		    </div>
		  </template>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const cpn = {
				template:'#cpn',
			}
			const app = new Vue({
				el: "#app",
				methods: {
                  handelClick(){
					  console.log('click');
				  }
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>

效果如下： 

不加修飾符是不會監聽到原生點選事件的。

如果是加了.native修飾符時：

 新增方法：

<cpn @click.native="handelClick"></cpn>

效果如下圖所示：

三、元件通訊的案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
		<div id="app">
          <cpn :number1="num1" :number2="num2"></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>{{datanum1}}</h2>
				<input type="text" v-model="datanum1"/>
				<h2>{{datanum2}}</h2>
				<input type="text" v-model="datanum2"/>
			</div>
		</template>  
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const cpn = {
				template:'#cpn',
				data(){
					return {
						datanum1:this.number1,
						datanum2:this.number2,
					}
				},
				props:{
					number1:{
						type:[String,Number]
					},
					number2:{
						type:[String,Number]
					},
				}
			}
			const app = new Vue({
				el: "#app",
				data() {
					return {
						num1:1,
						num2:2
					}
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>

效果如下：

 四、實現父子之間的值的雙向繫結

在子元件中新增監聽器，利用props和$emit來進行父子之間的雙向繫結

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :number1="num1" :number2="num2" @dataclick1="changeClick1" @dataclick2="changeClick2"></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>{{datanum1}}</h2>
				<h3>number1:{{number1}}</h3>
				<input type="text" v-model="datanum1" />
				<h2>{{datanum2}}</h2>
				<h3>number2:{{number2}}</h3>
				<input type="text" v-model="datanum2" />
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const cpn = {
				template: '#cpn',
				data() {
					return {
						datanum1: this.number1,
						datanum2: this.number2
					}
				},
				props: {
					number1: {
						type: [String, Number]
					},
					number2: {
						type: [String, Number]
					}
				},
				watch: {
					datanum1(n) {
						console.log('datanum1被監聽了');
						this.$emit('dataclick1', n / 100)
					},
					datanum2(n) {
						console.log('datanum2被監聽了');
						this.$emit('dataclick2', n * 100)
					}
				}
			}
			const app = new Vue({
				el: "#app",
				data() {
					return {
						num1: 1,
						num2: 2
					}
				},
				methods: {
					changeClick1(value) {
						this.num1 = value
					},
					changeClick2(value) {
						this.num2 = value
					}
				},
				computed: {
 
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>

效果 

 一個是除10一個是

五、父存取子 $refs

JavaScript中獲取元素可以使用document.querySelector，那可以在Vue中使用嗎？

我們可以測試一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<p id="bb" @click="handelClick" ref="aa">Nanchen</p>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data() {
					return {
					}
				},
				methods: {
					handelClick(){
						var bb = document.querySelector('bb');
						console.log(bb);
					}		
				}
			})
		</script>
	</body>
</html>

列印結果：

 答案是可以的，但是如果使用原生JS獲取元素的話，那麼用Vue就沒有意義了，Vue中有特定的語法

官網解釋：

$refs方式：ref 被用來給元素或子元件註冊參照資訊。參照資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用，參照指向的就是 DOM 元素；如果用在子元件上，參照就指向元件範例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<p id="bb" @click="handelClick" ref="aa">Nanchen</p>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data() {
					return {
					}
				},
				methods: {
					/* handelClick(){
						var bb = document.querySelector('bb');
						console.log(bb);
					} */
					handelClick() {
						console.log(this.$refs.aa);
					}
				}
			})
		</script>
	</body>
</html>

效果與上圖一致： 

六、使用$refs獲取元件中的值

 既然可以獲取普通元素那麼也可以獲得元件中的元素或者值

看這個例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
		<div id="app">
          <cpn ref="aaa"></cpn>
		  <button @click="handelClick">點選</button>
		</div>
		<!-- 子元件 -->
		  <template id="cpn">
		    <div>
		      我是子元件
		    </div>
		  </template>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const cpn = {
				template:'#cpn',
				data(){
					return {
						name:'我是子元件的name'    //獲取子元件的屬性
					}
				},
				
			}
			const app = new Vue({
				el: "#app",
				methods: {
                  handelClick(){
					  console.log(this.$refs.aaa.name);
				  }
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>

效果如下： 

下面看一個擴充套件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<count ref="one" @change="handclick"></count>
			<count ref="two" @change="handclick"></count>
			<h2>{{total}}</h2>
		</div>
		
		<script type="text/javascript">
		Vue.component('count',{
			template:
			`<div @click="handclick">
				{{number}}
			</div>`,
			data(){
				return{
					number:0
				}
			},
			methods:{
				handclick(){
					this.number++;
					this.$emit('change')
				}
			}
		})
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						total:0
					}
				},
				methods:{
					handclick(){
						this.total= this.$refs.one.number + this.$refs.two.number
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

 

 不僅如此，ref還可以呼叫元件中的方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
          <hello-world ref="hello"></hello-world>
		   <button @click="getHello">獲取helloworld元件中的值</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			Vue.component('helloWorld',{
				template:`<div>helloWorld</div>`,
				data(){
					return {
						number:0
					}
				},
				methods:{
					/*handelClick(){
						console.log('我是子元件的方法');
					}*/
				}
			})
			const app = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
                 getHello(){
					/* this.$refs.hello.handelClick(); */
					console.log(this.$refs.hello.$el.innerHTML);
				 }
				},
			})
		</script>
	</body>
</html>

效果如下：

 六、is與：is

is

作用：解決了html模板的限制。

看下面這段程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<table>
				<row></row>
			</table>
		</div>
		
		<script type="text/javascript">
		Vue.component('row',{
			template: '<tr><td>111</td></tr>'
		})
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
			})
		</script>
	</body>
</html>

會正常輸出

 但是：

會發現tr並不在table中，

解決辦法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
		<div id="app">
          <table>
				<tr is="row"></tr>
			</table> 
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			Vue.component('row', {
				template: '<tr><td>111</td></tr>'
			})
			const app = new Vue({
				el: "#app",
			})
		</script>
	</body>
</html>

 列印結果：

用：is還可以用來繫結動態元件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<component :is="type"></component>
			<button type="button" @click="changeClick">切換</button>
		</div>
		<script type="text/javascript">
		// 這裡要定義兩個全域性元件
			Vue.component('child-one',{
				template:'<div>child-one</div>'
			}),
			Vue.component('child-two',{
				template:'<div>child-two</div>'
			})
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						type:'child-one'
					}
				},
				methods:{
					changeClick(){
						  this.type = this.type === 'child-one' ? 'child-two' :'child-one'
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

以上就是Vue父子元件資料雙向繫結（父傳子、子傳父）及ref、$refs、is、：is的使用與區別的詳細內容，更多關於Vue父子元件資料雙向繫結的資料請關注it145.com其它相關文章！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com