欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue父子組件間引用之$parent、$children

 更新時(shí)間:2020年05月20日 10:03:57   作者:云小夢  
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue中提到【父子組件】,則一定會想到我們常用的父子組件通信:props+$on()、$emit() ,如圖:

tp

也就是說,雖然在一般情況下,子組件是不能引用父組件或者Vue實(shí)例的數(shù)據(jù),但是對于在開發(fā)中出現(xiàn)的“數(shù)據(jù)需要在組件中來回傳遞”,我們最簡單的解決辦法就是通過props(和v-on)將數(shù)據(jù)從父組件傳到子組件,再用$emit將數(shù)據(jù)從子組件傳到父組件,以此循環(huán)引用。

但是在另一些場景下,我們可能想要比如(在父組件中)拿到子組件對象,然后直接操作其中數(shù)據(jù),去實(shí)現(xiàn)一些功能,比如方法的調(diào)用。

yy

有時(shí)候我們需要父組件直接訪問子組件、子組件直接訪問父組件,或者子組件訪問根組件:

  • 父組件訪問子組件:使用$children$refs reference
  • 子組件訪問父組件:使用$parent

父子組件的訪問方式之:$children

children很特別,查閱資料可以發(fā)現(xiàn):this.$children是一個(gè)數(shù)組類型,它包含了所有子組件對象:

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc></mxc>
			<button @click="btnClick">顫抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子組件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$children)
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

點(diǎn)擊(父組件)按鈕之后:

xs

我們還可以通過循環(huán)拿到所有子組件數(shù)據(jù):

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc></mxc>
			<button @click="btnClick">顫抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子組件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$children)
						for(let c of this.$children){
							console.log(c.name)
						}
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是子組件的name'
							}
						},
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

點(diǎn)擊(父組件)按鈕之后:

xs

因?yàn)槭菙?shù)組,所以我們可以通過比如:this.$children[2]來拿到第三個(gè)子組件的數(shù)據(jù)。
但是這么做有一個(gè)問題:比如開發(fā)時(shí)突然在這三個(gè)子組件中又插入了一個(gè)子組件(可能相同,也可能不同),這時(shí)候【2】就不再是我們需要的了。。。

所以我們可以用vue-DOM之光$refs

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc ref="aaa"></mxc>
			<button @click="btnClick">顫抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子組件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$refs)
						console.log(this.$refs.aaa)
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是子組件的name'
							}
						},
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

點(diǎn)擊(父組件)按鈕之后:

xs

為什么叫“DOM之光”呢?因?yàn)樗驮鶭S中的document.querySelector('xxx')功能一樣,它可以在vue中獲取元素/匹配組件

子訪問父:$parent

<body>
		<div id="app">
			<mxc></mxc>
		</div>
		<template id="mxc">
			<div>我是子組件啊</div>
			<button @click="btnClick">更加顫抖的child</button>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				components:{
					mxc:{
						template:'#mxc',
						methods:{
							btnClick(){
								console.log(this.$parent)
							}
						}
					}
				}
			})
		</script>
	</body>

如法炮制:

xs

圖中el屬性在有些瀏覽器(或添加了vue插件)會顯示未Vue?
因?yàn)楫?dāng)前子組件的父組件就是vue實(shí)例啊!

(但是在實(shí)際中$parent用的非常少——考慮到耦合度的原因)

子組件訪問根組件:$root

<body>
		<div id="app">
			<mxc></mxc>
		</div>
		<template id="mxc">
			<div>
				<div>我是mxc組件</div>
				<cdn></cdn>
			</div>
		</template>
		<template id="mxca">
			<div>
				<div>我是子子組件啊</div>
				<button @click="btnClick">巨顫祖child</button>
			</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是中間子組件的name'
							}
						},
						components:{
							cdn:{
								template:'#mxca',
								methods:{
									btnClick(){
										console.log(this.$parent.name)
										console.log(this.$root.message)
									}
								}
							}
						}
					}
				}
			})
		</script>
	</body>

xs

總結(jié)

到此這篇關(guān)于vue父子組件間引用:$parent、$children的文章就介紹到這了,更多相關(guān)vue父子組件間引用:$parent、$children內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue記事本實(shí)例詳解

    Vue記事本實(shí)例詳解

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vuex的數(shù)據(jù)渲染與修改淺析

    vuex的數(shù)據(jù)渲染與修改淺析

    這篇文章主要給大家介紹了關(guān)于vuex的數(shù)據(jù)渲染與修改的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解

    laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解

    由于 Laravel-admin 采用的是 pjax 的方式刷新頁面,意味著很多頁面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下
    2019-06-06
  • Vue如何基于vue-i18n實(shí)現(xiàn)多國語言兼容

    Vue如何基于vue-i18n實(shí)現(xiàn)多國語言兼容

    這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • 如何利用Vue3+Element?Plus實(shí)現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單

    如何利用Vue3+Element?Plus實(shí)現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單

    標(biāo)簽頁一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級菜單或者二級菜單時(shí),可以增加對應(yīng)的標(biāo)簽頁,當(dāng)你點(diǎn)擊對應(yīng)的標(biāo)簽頁,可以觸發(fā)對應(yīng)的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼

    vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue3常用的API使用簡介

    vue3常用的API使用簡介

    這篇文章主要介紹了vue3常用的API使用簡介,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-03-03
  • vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例

    vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例

    本篇文章主要介紹了vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue組件與Vue cli腳手架安裝方法超詳細(xì)講解

    Vue組件與Vue cli腳手架安裝方法超詳細(xì)講解

    CLI是一個(gè)全局安裝的npm包,提供了終端里的vue命令。它可以通過vue create快速搭建一個(gè)新項(xiàng)目,或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項(xiàng)目
    2022-11-11
  • 使用VueRouter的addRoutes方法實(shí)現(xiàn)動態(tài)添加用戶的權(quán)限路由

    使用VueRouter的addRoutes方法實(shí)現(xiàn)動態(tài)添加用戶的權(quán)限路由

    這篇文章主要介紹了使用VueRouter的addRoutes方法實(shí)現(xiàn)動態(tài)添加用戶的權(quán)限路由,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06

最新評論