vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解

更新時間：2022年09月08日 15:21:31 作者：哈哈ha~

父組件通過屬性傳值給子組件，父組件修改數(shù)據(jù)后會刷新頁面并重新傳值給子組件，子組件可以修改父組件傳的值并刷新自己的頁面?但是并不會修改父組件中的值，這篇文章主要介紹了vue組件傳值（高級）、屬性傳值、反向傳值、跨級傳值,需要的朋友可以參考下

一、屬性傳值——父傳子
二、反向傳值——子傳父$emit
三、反向傳值——子傳父--sync
四、反向傳值——子傳父--v-model
v-model指令的修飾符：
五、多層（跨級）組件傳值
六、$ parent/$root、$children/$refs
七、Vue 依賴注入 - Provide/Inject(重點)
八、中央事件總線bus

一、屬性傳值——父傳子

父組件通過屬性傳值給子組件父組件修改數(shù)據(jù)后會刷新頁面并重新傳值給子組件

子組件可以修改父組件傳的值并刷新自己的頁面但是并不會修改父組件中的值

父組件App：

<template>
  <div id="app">
    <Box v-for="(item, index) in arr" 
    :key="item.id" 
    :employee="item.employee" 
    :salary="item.salary"></Box>
    <p>總工資：{{total}}</p>
  </div>
 
</template>
 
<script>
import Box from "./Box.vue";
export default {
  data() {
    return {
      arr: [
        { id: 1, employee: "haha", salary: 3221 },
        { id: 2, employee: "xixi", salary: 4262 },
        { id: 3, employee: "yoyo", salary: 3122 }
      ]
    };
  },
  components: {
    Box
  },
  computed:{
    total(){
      let sum=0
      for (let i = 0; i < this.arr.length; i++) {
        sum+=this.arr[i].salary
      }
      return sum
    }
  }
};
</script>

子組件Box：

<template>
	<div>
		<span>員工：{{employee}}  工資：{{salary}}</span>
		<button @click="change">漲工資</button>
	</div>
</template>
 
<script>
	export default {
		props:["employee","salary"],
		methods:{
			change(){
				this.salary+=500
			}
		}
	}
</script>

結(jié)果顯示：

二、反向傳值——子傳父$emit

在父組件中綁定事件事件被觸發(fā)后獲取子組件傳的值修改data中的數(shù)據(jù) 刷新頁面

在子組件修改數(shù)據(jù)后觸發(fā)子組件中的父組件的事件并傳新值$emit("事件","值")

父組件App：

<template>
  <div id="app">
    <Box @mychange="fn" v-for="(item, i) in arr" 
    :key="item.id" 
    :employee="item.employee" 
    :salary="item.salary"
    :index="i"></Box>
    <p>總工資：{{total}}</p>
  </div>
 
</template>
 
<script>
import Box from "./Box.vue";
export default {
  data() {
    return {
      arr: [
        { id: 1, employee: "haha", salary: 3221 },
        { id: 2, employee: "xixi", salary: 4262 },
        { id: 3, employee: "yoyo", salary: 3122 }
      ]
    };
  },
  components: {
    Box
  },
  methods:{
    fn(newsalary,index){
     //父組件接收到子組件傳來的新值更新自己的數(shù)據(jù) 并重新傳值 刷新頁面
      this.arr[index].salary=newsalary
			this.$set(this.arr,index,this.arr[index])
    }
  },
  computed:{
    total(){
      let sum=0
      for (let i = 0; i < this.arr.length; i++) {
        sum+=this.arr[i].salary
      }
      return sum
    }
  }
};
</script>

子組件Box：

<template>
	<div>
		<span>員工：{{employee}}  工資：{{salary}}</span>
		<button @click="change">漲工資</button>
	</div>
</template>
 
<script>
	export default {
		props:["employee","salary","index"],
		methods:{
			change(){
				let newsalary=this.salary+500
                 //觸發(fā)父組件的事件 同時將修改后的數(shù)據(jù)傳給父組件
				this.$emit("mychange",newsalary,this.index)
			}
		}
	}
</script>

結(jié)果顯示：

三、反向傳值——子傳父--sync

子：this.$emit("updata:a","更改的值")

父：<Box :a.sync="msg"></Box>

.sync 幫忙修改了父組件的數(shù)據(jù) 不用父組件再綁定事件獲取新值修改自己的數(shù)據(jù)

父組件App：

<template>
	<div>
		<h1>app組件--{{msg}}</h1>
		<Box :a1.sync="msg"></Box>
	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
		data() {
			return {
				msg: "app的數(shù)據(jù)",
			}
		},
		components: {
			Box
		},
	}
</script>

子組件Box：

<template>
	<div>
		<h2>box組件--a1--{{a1}}</h2>
		<button @click="change">修改a1中的數(shù)據(jù)</button>
	</div>
</template>
 
<script>
	export default {
		props:["a1"],
		methods:{
			change(){
				console.log("點擊了按鈕")
				// 由以下兩步操作，變?yōu)榱艘徊剑?
				 //this.a1="box修改了a1的值"
				// this.$emit("myevent","box修改了a1的值")
				this.$emit("update:a1","box修改了a1的值")
			}
		}
	}
</script>

結(jié)果顯示：

四、反向傳值——子傳父--v-model

v=model <----語法糖----> :value="msg" @input="fn"

父：<Box :v-model="msg"></Box>

子：props:["value"] this.$emit("input","修改的值") 觸發(fā)input事件

父組件中：

<template>
	<div class="app">
		<h2>app組件--{{msg}}</h2>
		<Box v-model="msg"></Box>
	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
		data() {
			return {
				msg:"app組件的數(shù)據(jù)"
			}
		},
		components: {
			Box
		},
		methods:{
		}
	}
</script>

子組件中：

<template>
	<div class="box">
	  <h2>box組件--{{value}}</h2>
	  <button @click="change">change</button>
	</div>
</template>
 
<script>
	export default {
		props:["value"],
		methods:{
			change(){
				this.$emit("input","box修改了數(shù)據(jù)")
			}
		}
	}
</script>

結(jié)果顯示：

v-model指令的修飾符：

1、lazy修飾符--雙向綁定時，當(dāng)光標(biāo)離開時才更新對應(yīng)的變量

用戶使用v-model之后，用戶每次修改輸入內(nèi)容，都會將后臺的數(shù)據(jù)同時綁定。
為了避免這種情況的發(fā)生，使用lazy修飾符來進(jìn)行限定。
只有當(dāng)用戶的input中失去焦點或用戶點擊回車后，才會將后臺的數(shù)據(jù)進(jìn)行修改更新。
類似于懶加載和防抖的設(shè)計。

<input type="text" v-model.lazy="message">

2、number修飾符--自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型

當(dāng)用戶在input中輸入數(shù)字時，瀏覽器會默認(rèn)將輸入的數(shù)字轉(zhuǎn)化為string類型。
使用number修飾符來將輸入的數(shù)字重新轉(zhuǎn)為number類型。

<input type="text" v-model.number="age">

3.trim修飾符--自動忽略輸入內(nèi)容的首尾空白字符

用戶可能輸入的字符串中含有空格，這樣系統(tǒng)在處理時可能會出現(xiàn)錯誤。
使用trim修飾符來去掉字符串首部或者尾部的所有空格。

 <input type="text" v-model.trim="userName">

五、多層（跨級）組件傳值

父元素傳的所有屬性$attrs（屬性傳遞）

父元素傳的所有監(jiān)聽器$listener（事件傳遞）

App:<Box1 :b1="msg" @x="xchange"></Box1> 事件雖然綁在子組件但是是孫組件在觸發(fā)事件

Box1:<Box2 v-bind="$attrs" v-on="$listener"></Box2> Box1只是作為中間人將綁定的屬性和事件都傳給子組件Box2

Box2:props:["b1"] 觸發(fā)上層傳下來的App的事件修改App組件的數(shù)據(jù) 再更新數(shù)據(jù) 重新刷新頁面

App組件中：

<template>
	<div>
		 <h1>app-{{msg}}</h1>
		 <button @click="change1">點擊修改app組件的msg</button>
		 <Box1 :b1="msg" @x="xchange"></Box1>
	</div>
</template>
<script>
	import Box1 from "./Box1.vue"
	export default {
		data() {
			return {
				msg: "app組件的數(shù)據(jù)"
			}
		},
		methods:{
			change1(){
				this.msg="app組件修改了msg的數(shù)據(jù)"
			},
			xchange(arg){
				this.msg=arg
			}
		},
		components:{
			Box1
		}
	}
</script>

Box1組件中：

<template>
	<div>
		<h1>{{$attrs.b1}}</h1>
		<Box2 v-bind="$attrs" v-on="$listeners"></Box2>
	</div>
</template>
 
<script>
	import Box2 from "./Box2.vue"
	export default {
		components:{
			Box2
		},
		methods:{
			look(){
				console.log(this.$attrs)
			}
		}
	}
</script>

Box2組件中：

<template>
	<div>
		<h3>box2--{{b1}}</h3>
		<button @click="change">change</button>
	</div>
</template>
 
<script>
	export default {
		props:["b1"],
		methods:{
			change(){
				this.$emit("x","box2修改了數(shù)據(jù)")
			}
		}
	}
</script>

結(jié)果顯示：

六、$ parent/$root、$children/$refs

$root: 訪問根組件vm對象,所有的子組件都可以將這個實例作為一個全局 store 來訪問或使用,現(xiàn)在有更好的技術(shù)vuex代替。
$parent:訪問父組件對象,直接操作父組件的data數(shù)據(jù),不需要再使用屬性傳值,但是容易出現(xiàn)渲染混亂之后只渲染一個的情況可以連點 this.parent.parent...
$children:訪問子組件對象數(shù)組,不是子元素不能保證順序,沒有按照順序加載，加載順序是混亂的也不是響應(yīng)式的
$refs:只會在組件渲染完成之后生效，并且它們不是響應(yīng)式的。應(yīng)該避免在模板或計算屬性中訪問 $refs。在組件或者原生元素綁定ref屬性(類似于id) 在父組件中可以通過 this.$refs訪問到它

App組件：

<template>
	<div>
		<h1>app組件--{{msg}}</h1>
		<div>
			<Box1></Box1>
           <!--雖然Box1組件寫在div里面 但是.$parent指的還是父組件App 而非div-->
		</div>
	</div>
</template>
<script>
	import Box1 from "./Box1.vue"
	export default {
		data() {
			return {
				msg:"app組件的數(shù)據(jù)"
			}
		},
		methods: {},
		components: {
			Box1
		}
	}
</script>

Box1組件：

<template>
	<div>
		<button @click="look">box1</button>
		<Box2></Box2>
		<Box2></Box2>
		<p ref="p1">ref</p>
		<button @click="getref">獲取ref</button>
	</div>
</template>
 
<script>
	import Box2 from "./Box2.vue"
	export default {
		components: {
			Box2
		},
		methods: {
			getref(){
				console.log(this.$refs)
			},
			look() {
				console.log(this,this.$parent,this.$children,this.$root)
				this.$parent.msg="box1修改了app的數(shù)據(jù)"
			}
		}
	}
</script>

Box2組件：

<template>
	<div>
		<p>{{$parent.$parent.msg}}</p>
		<button @click="change1">box2-change</button>
	</div>
</template>
 
<script>
	export default {
		methods:{
			change1(){
				this.$parent.$parent.msg="box2修改了數(shù)據(jù)"
			}
		}
	}
</script>

結(jié)果顯示：

七、Vue 依賴注入 - Provide/Inject(重點)

注：Provide和Inject綁定并不是可響應(yīng)的

父組件使用：provide：提供數(shù)據(jù)

把data中的數(shù)據(jù)提供給子孫組件

// provide選項提供變量
    provide: {
      message: 'provided by father'
    },

inject:["message"]

八、中央事件總線bus

自定義事件的語法：

Vue提供的技術(shù)：某繼承Vue的組件有三個功能：

1.觸發(fā)x組件的a事件：x.$emit("a事件",參數(shù))

2.給x組件綁定a事件：x.$on("a事件",監(jiān)聽器函數(shù))

3.給x組件解綁a事件：x.$off("a事件",監(jiān)聽器函數(shù))

通過創(chuàng)建一個新的vm對象,專門統(tǒng)一注冊事件,供所有組件共同操作,達(dá)到所有組件隨意隔代傳值的效果：

main.js：

Vue.prototype.$bus = new Vue({
  methods: {
    //綁定事件
    on(eventname, callback) {
      this.$on(eventname, callback)
    },
    //觸發(fā)事件
    emit(eventname, ...arg) {
      this.$emit(eventname, ...arg)
    },
    //解綁事件
    off(eventname, callback) {
      this.$off(eventname, callback)
    },
  }
})

使用：

this.$bus.on("事件",監(jiān)聽器函數(shù))

this.$bus.emit("事件","參數(shù)")

this.$bus.off("事件",監(jiān)聽器函數(shù))

示例:

組件1:
 this.$bus.on('changedFormObject',(val) =>{
            //接受并處理傳過來的值:val
            this.msg = val;
        });

組件2:
this.$bus.emit('changedFormObject',this.inputValue);//把組件2的data中的給inputValue值傳給組件1

到此這篇關(guān)于vue組件傳值（高級）、屬性傳值、反向傳值、跨級傳值的文章就介紹到這了,更多相關(guān)vue組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解

目錄

一、屬性傳值——父傳子

二、反向傳值——子傳父$emit

三、反向傳值——子傳父--sync

四、反向傳值——子傳父--v-model

v-model指令的修飾符：

五、多層（跨級）組件傳值

六、$ parent/$root、$children/$refs

七、Vue 依賴注入 - Provide/Inject(重點)

八、中央事件總線bus

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解

目錄

一、屬性傳值——父傳子

二、反向傳值——子傳父$emit

三、反向傳值——子傳父--sync

四、反向傳值——子傳父--v-model

v-model指令的修飾符：

五、多層（跨級）組件傳值

六、$ parent/$root、$children/$refs

七、Vue 依賴注入 - Provide/Inject(重點)

八、中央事件總線bus

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解

二、反向傳值——子傳父$emit

三、反向傳值——子傳父--sync

四、反向傳值——子傳父--v-model

五、多層（跨級）組件傳值

六、$ parent/$root、$children/$refs

七、Vue 依賴注入 - Provide/Inject(重點)

八、中央事件總線bus