快捷導(dǎo)航

vue之prop與$emit的用法說(shuō)明

更新時(shí)間：2022年04月11日 09:48:55 作者：qq_33779502

這篇文章主要介紹了vue之prop與$emit的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

prop與$emit的用法

1.vue組件Prop傳遞數(shù)據(jù)

組件實(shí)例的作用域是孤立的，這意味著不能在子組件的模板內(nèi)直接引父組件的數(shù)據(jù)，如果要讓子組件使用父組件的數(shù)據(jù)，則需要通過(guò)子組件的prop選項(xiàng)；prop是單向綁定的，當(dāng)父組件的屬性變化時(shí)，將傳遞給子組件，但是反過(guò)來(lái)不行；這樣主要是防止子組件無(wú)意修改父組件的狀態(tài)；每次父組件更新時(shí)，子組件的所有prop都會(huì)更新為最新值。這意味著你不能在子組件內(nèi)部改變prop。

2.子組件可以使用$emit觸發(fā)父組件的自定義事件

vm.$emit( event, arg )：發(fā)送數(shù)據(jù)，第一個(gè)參數(shù)是發(fā)送數(shù)據(jù)的名稱，接收時(shí)還用這個(gè)參數(shù)接收，第二個(gè)參數(shù)是這個(gè)數(shù)據(jù)現(xiàn)在的位置

拓展：

vm.$on( event, fn )：接收數(shù)據(jù)，第一個(gè)參數(shù)是數(shù)據(jù)的名稱，與發(fā)送時(shí)的名字對(duì)應(yīng)，第二個(gè)參數(shù)是一個(gè)方法，要對(duì)數(shù)據(jù)的操作

注：vue模板只能有一個(gè)根對(duì)象 (在template中只能用一個(gè)標(biāo)簽來(lái)包裹全部元素)不然會(huì)報(bào)錯(cuò)如：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

父組件：

<template>
? <div>
? ? ?<div>父組件的addName：{{addrName}}</div>
? ? <child-prop @showAddrName="updateAddrName" :sendData="addrName"></child-prop>
? </div>
</template>

<script>
? import childProp from "./childProp";
? export default {
? ? name:'index',
? ? components: {childProp},
? ? data () {
? ? ? return {
? ? ? ? addrName:"北京"
? ? ? }
? ? },
? ? methods:{
? ? ? updateAddrName(data){//觸發(fā)子組件城市選擇-選擇城市的事件
? ? ? ? console.log(data);
? ? ? ? this.addrName = data.addrName;//改變了父組件的值
? ? ? ? console.log('toCity:'+this.addrName)
? ? ? }
? ? }
? }
</script>

子組件：

<template>
? <div>
? ? <h3>父組件傳給子組件的addrName:{{sendData}}</h3>
? ? <br/><button @click='addr(`上海`)'>點(diǎn)擊此處將‘上海'發(fā)射給父組件</button>
? </div>
</template>

<script>
? export default {
? ? name:'childProp',
? ? props:["sendData"], // 用來(lái)接收父組件傳給子組件的數(shù)據(jù)
? ? methods:{
? ? ? addr(val) {
? ? ? ? let data = {
? ? ? ? ? addrName: val
? ? ? ? };
? ? ? ? this.$emit('showAddrName',data);//select事件觸發(fā)后，自動(dòng)觸發(fā)showCityName事件
? ? ? }
? ? }
? }
</script>

今天遇到的坑--this.$emit

寫(xiě)給趕時(shí)間的人

一句話

this.$emit('xxx', input), input最好是字符串, 如果需要傳一個(gè)對(duì)象, 那么, 建議您在父組件里面, JSON.parse(input), 或者不要傳原始對(duì)象, 需要const一個(gè)對(duì)象, 深拷貝您需要傳的對(duì)象

寫(xiě)給有點(diǎn)時(shí)間看的人

作為一個(gè)半路出家的偽前端, 遇到坑, 基本都是因?yàn)樽约夯A(chǔ)知識(shí)不牢固, 例如今天遇到這個(gè)this.$emit的坑

需求

一個(gè)簡(jiǎn)單的需求, 頁(yè)面上面有一個(gè)搜索框, 里面需要填2個(gè)字段, 按確定進(jìn)行搜索

實(shí)現(xiàn)

我是這樣想的, 填兩個(gè)字段, 那我就把他們寫(xiě)在一個(gè)對(duì)象里面, this.$emit的時(shí)候, 傳這個(gè)對(duì)象的值就好了

我的實(shí)現(xiàn)方法

search組件

<template>
? <div>
? ? <div>search</div>
? ? <input type="text" v-model="searchKey.key_apple">
? ? <input type="text" v-model="searchKey.key_blackBerry">
? ? <button @click="onSubmit">確定</button>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? searchKey: {
? ? ? ? key_blackBerry: "",
? ? ? ? key_apple: ""
? ? ? }
? ? };
? },
?
? methods: {
? ? onSubmit() {
? ? ? this.$emit("onSearchSubmit", this.searchKey);
? ? }
? }
};
</script>

父組件：

<template>
? <section class="container">
? ? <div>
? ? ? <Search @onSearchSubmit="onSearchSubmit"/>
? ? ? <h1>{{parent_search}}</h1>
? ? </div>
? </section>
</template>

<script>
import Search from "~/components/Search.vue";
?
export default {
? components: {
? ? Search
? },
?
? data() {
? ? return {
? ? ? parent_search: {}
? ? };
? },
?
? methods: {
? ? onSearchSubmit(input) {
? ? ? this.parent_search = input;
? ? }
? }
};
</script>

效果

實(shí)際上也能達(dá)到要求, 但是, 出現(xiàn)了一個(gè)意想不到的結(jié)果: 當(dāng)?shù)谝淮吸c(diǎn)擊確定之后, 我們?cè)僭谒阉骺蚶锩孑斎? 預(yù)想的結(jié)果是什么都沒(méi)變化, 例如h1里面的字符不會(huì)變化, 但是, 結(jié)果確發(fā)現(xiàn), 雙向綁定了, 這不是我想要的結(jié)果...我并沒(méi)有實(shí)現(xiàn)父子組件間的雙向綁定(例如通過(guò)復(fù)寫(xiě)組件的change方法)

問(wèn)題來(lái)了,問(wèn)題解決

發(fā)生這個(gè)情況的原因在于, 我寫(xiě)的自組件this.$emit里面, 是一個(gè)對(duì)象, 其實(shí)傳的是它的地址

所以，后面這樣改寫(xiě)子組件就ok了

<template>
? <div>
? ? <div>search</div>
? ? <input type="text" v-model="searchKey.key_apple">
? ? <input type="text" v-model="searchKey.key_blackBerry">
? ? <button @click="onSubmit">確定</button>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? searchKey: {
? ? ? ? key_blackBerry: "",
? ? ? ? key_apple: ""
? ? ? }
? ? };
? },
?
? methods: {
? ? onSubmit() {
? ? ? const input = JSON.parse(JSON.stringify(this.searchKey));
? ? ? this.$emit("onSearchSubmit", input);
? ? }
? }
};
</script>

基礎(chǔ)真的很重要~

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: