vue中prop與$emit怎么用

這篇文章主要介紹“vue中prop與$emit怎么用”，在日常操作中，相信很多人在vue中prop與$emit怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中prop與$emit怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

prop與$emit的用法

1.vue組件Prop傳遞數據

 組件實例的作用域是孤立的，這意味著不能在子組件的模板內直接引父組件的數據，如果要讓子組件使用父組件的數據，則需要通過子組件的prop選項；prop是單向綁定的，當父組件的屬性變化時，將傳遞給子組件，但是反過來不行；這樣主要是防止子組件無意修改父組件的狀態；每次父組件更新時，子組件的所有prop都會更新為最新值。這意味著你不能在子組件內部改變prop。

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

• vm.$emit( event, arg )：發送數據，第一個參數是發送數據的名稱，接收時還用這個參數接收，第二個參數是這個數據現在的位置

拓展：

• vm.$on( event, fn )：接收數據，第一個參數是數據的名稱，與發送時的名字對應，第二個參數是一個方法，要對數據的操作

注：vue模板只能有一個根對象 (在template中只能用一個標簽來包裹全部元素)不然會報錯如：

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){//觸發子組件城市選擇-選擇城市的事件
        console.log(data);
        this.addrName = data.addrName;//改變了父組件的值
        console.log('toCity:'+this.addrName)
      }
    }
  }
</script>

子組件：

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

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

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

寫給趕時間的人

一句話

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

寫給有點時間看的人

作為一個半路出家的偽前端, 遇到坑, 基本都是因為自己基礎知識不牢固, 例如今天遇到這個this.$emit的坑

需求

一個簡單的需求, 頁面上面有一個搜索框, 里面需要填2個字段, 按確定進行搜索

實現

我是這樣想的, 填兩個字段, 那我就把他們寫在一個對象里面, this.$emit的時候, 傳這個對象的值就好了

我的實現方法

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"/>
      <h2>{{parent_search}}</h2>
    </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>

效果

實際上也能達到要求, 但是, 出現了一個意想不到的結果: 當第一次點擊確定之后, 我們再在搜索框里面輸入, 預想的結果是什么都沒變化, 例如h2里面的字符不會變化, 但是, 結果確發現, 雙向綁定了, 這不是我想要的結果...我并沒有實現父子組件間的雙向綁定(例如通過復寫組件的change方法)

問題來了,問題解決

發生這個情況的原因在于, 我寫的自組件this.$emit里面, 是一個對象, 其實傳的是它的地址

所以，后面這樣改寫子組件就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>

到此，關于“vue中prop與$emit怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！