props、屬性、事件傳遞: v-bind="$props"、v-bind="$attrs"、v-on="$listeners"

之前看了一篇關於Vue開發技巧的文章,其中提到了在寫高級組件時,通過v-bind="$props"將props一次性向下傳遞。這種向下傳遞的方式我之前沒有用過,便看了下官網的介紹,並補充了一些相關API用法,在這里記錄一下,方便自己以后查看。先進行相關的屬性介紹,代碼在后面。

使用介紹:

  v-bind="$props": 可以將父組件的所有props下發給它的子組件,子組件需要在其props:{} 中定義要接受的props。
  vm.$props: 當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
官網介紹: https://cn.vuejs.org/v2/api/#vm-props
  v-bind="$attrs": 將調用組件時的組件標簽上綁定的非props的特性(class和style除外)向下傳遞。在子組件中應當添加inheritAttrs: false(避免父作用域的不被認作props的特性綁定應用在子組件的根元素上)。
  vm.$attrs :包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。
官網介紹: https://cn.vuejs.org/v2/api/#vm-attrs
https://cn.vuejs.org/v2/api/#inheritAttrs
  v-on="listeners":將父組件標簽上的自定義事件向下傳遞,其子組件可以直接通過this.listeners": 將父組件標簽上的自定義事件向下傳遞,其子組件可以直接通過this.listeners":將父組件標簽上的自定義事件向下傳遞,其子組件可以直接通過this.emit(eventName)的方式調用。
  vm.$listeners: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

 

 index.vue頁面

    <template>
      <div>
        <h1>props、屬性、事件傳遞</h1>
        <app-parent test="123"  :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent>
      </div>
    </template>

    <script>
      import AppParent from './parent.vue';
      export default {
        data() {
          return {
              name: '傳給父組件的值',
              age: '18'
          };
        },
        components: {
            AppParent
        },
        methods: {
            say1() {
                console.log('第一個。。。。。');
            },
            say2() {
                console.log('第二個。。。。。');
            }
        }
      }
    </script>

parent.vue組件

<template>
      <div>
          <h3>父組件</h3>
          <div>組件名上綁定的非props特性($attrs): {{$attrs}}</div>
          <app-child v-on="$listeners" v-bind="$props"></app-child>
      </div>
    </template>

    <script>
      import AppChild from './child.vue';
      export default {
        data() {
          return {

          };
        },
        inheritAttrs: false,
        props: ['name', 'age'],
        components: {
            AppChild
        },
        mounted() { 
            this.$emit('start1');
        }
      }
    </script>

child.vue組件

<template>
      <div>
          <h3>子組件</h3>
          <div>父組件傳遞過來的名稱: {{name}}</div>
          <div>父組件傳遞過來的年齡: {{age}}</div>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {

          };
        },
        props: ['name', 'age'],
        components: {},
        created() {

        },
        mounted() {
            this.$emit('start2');
        },
      }
    </script>

效果圖:

 

 以上就是我對這些API的理解,如果有什么不對的地方歡迎大家指出,謝謝。
參考資料:
  7個有用的Vue開發技巧: https://juejin.im/post/5ce3b519f265da1bb31c0d5f#heading-4

 

 

本文轉載自：https://segmentfault.com/a/1190000020637062?utm_source=tag-newest