官方網(wǎng)站

• 訪問根實例$root

  小型應(yīng)用中可以在 vue 根實例里存儲共享數(shù)據(jù)，組件中可以通過 $root 訪問根實例蜒犯，不過這個模式擴展到中大型應(yīng)用來說就不然了

  <!-- 01-root.vue -->
  <div>
      <!--
      小型應(yīng)用中可以在 vue 根實例里存儲共享數(shù)據(jù)
      組件中可以通過 $root 訪問根實例
      -->
      $root.title：{{ $root.title }}
      <br>
      <button @click="$root.handle">獲取 title</button>&nbsp;&nbsp;
      <button @click="$root.title = 'Hello $root'">改變 title</button>
  </div>
  

  // main.js
  new Vue({
    render: (h) => h(App),
    data: {
      title: '根實例 - Root',
    },
    methods: {
      handle () {
        console.log(this.title)
      }
    }
  }).$mount('#app')
  

• 訪問父組件實例

  和 $root 類似覆获，$parent 可以用來從一個子組件訪問父組件的實例，觸達父級組件會使得你的應(yīng)用更難調(diào)試和理解

  <!-- parent.vue -->
  <script>
  export default {
    data () {
      return {
        title: '獲取父組件實例'
      }
    },
    methods: {
      handle () {
        console.log(this.title)
      }
    }
  }
  </script>
  <!-- child.vue -->
  <template>
    <div class="child">
      child<br>
      $parent.title：{{ $parent.title }}<br>
      <button @click="$parent.handle">獲取 $parent.title</button>
      <button @click="$parent.title = 'Hello $parent.title'">改變 $parent.title</button>
    
      <grandson></grandson>
    </div>
  </template>
  <!-- grandson.vue -->
  <template>
    <div class="grandson">
      grandson<br>
      $parent.$parent.title：{{ $parent.$parent.title }}<br>
      <button @click="$parent.$parent.handle">獲取 $parent.$parent.title</button>
      <button @click="$parent.$parent.title = 'Hello $parent.$parent.title'">改變 $parent.$parent.title</button>
    </div>
  </template>
  

  在更底層組件中填大，可以使用$parent.$parent獲取更高級組件實例

• 訪問子組件實例或子元素

  可以通過使用ref為子組件賦予一個ID，可以在JavaScript中直接訪問子組件或元素

  • 通過ref獲取子組件

    <template>
      <div>
        <myinput ref="mytxt"></myinput>
        <button @click="focus">獲取焦點</button>
      </div>
    </template>
    
    <script>
    import myinput from './02-myinput'
    export default {
      components: {
        myinput
      },
      methods: {
        focus () {
          this.$refs.mytxt.focus()
        }
      }
    }
    </script>
    

  • 通過ref獲取DOM元素

    <template>
      <div>
        <input v-model="value" type="text" ref="txt">
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          value: 'default'
        }
      },
      methods: {
        focus () {
          this.$refs.txt.focus()
        }
      }
    }
    </script>
    

• 依賴注入provide&inject

  使用 $parent 無法很好的擴展到更深層級的嵌套組件上俏橘，所以就需要使用依賴注入：provide 和 inject允华。

  provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法

  <!-- parent.vue -->
  <template>
    ...
  </template>
  
  <script>
  export default {
    provide () {
      return {
        title: this.title,
        handle: this.handle
      }
    },
    data () {
      return {
        title: '父組件 provide'
      }
    },
    methods: {
      handle () {
        console.log(this.title)
      }
    }
  }
  </script>
  

  然后再任何后代組件里，可以使用 inject 選項來接收指定 property

  inject: ['title', 'handle']
  

• listeners

  $attrs：把父組件中非prop屬性綁定到內(nèi)部組件

  $listeners：把父組件中的DOM對象的原生事件綁定到內(nèi)部組件

  如果不希望組件的根元素繼承 attribute，在組件的選項中設(shè)置 inheritAttrs: false

  <!-- parent.vue -->
  <template>
    <div>
      <myinput
        required
        placeholder="Enter your username"
        class="theme-dark"
        @focus="onFocus"
        @input="onInput"
        data-test="test">
      </myinput>
      <button @click="handle">按鈕</button>
    </div>
  </template>
  <script>
  import myinput from './02-myinput'
  export default {
    components: {
      myinput
    },
    methods: {
      handle () {
        console.log(this.value)
      },
      onFocus (e) {
        console.log(e)
      },
      onInput (e) {
        console.log(e.target.value)
      }
    }
  }
  </script>
  <!-- child.vue -->
  <template>
    <!--
      1. 從父組件傳給自定義子組件的屬性靴寂，如果沒有 prop 接收
         會自動設(shè)置到子組件內(nèi)部的最外層標簽上
         如果是 class 和 style 的話磷蜀，會合并最外層標簽的 class 和 style 
    -->
    <!-- <input type="text" class="form-control" :placeholder="placeholder"> -->
  
    <!--
      2. 如果子組件中不想繼承父組件傳入的非 prop 屬性，可以使用 inheritAttrs 禁用繼承
         然后通過 v-bind="$attrs" 把外部傳入的非 prop 屬性設(shè)置給希望的標簽上
  
         但是這不會改變 class 和 style
    -->
    <!-- <div>
      <input type="text" v-bind="$attrs" class="form-control">
    </div> -->
  
  
    <!--
      3. 注冊事件
    -->
  
    <!-- <div>
      <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        @focus="$emit('focus', $event)"
        @input="$emit('input', $event)"
      >
    </div> -->
  
  
    <!--
      4. $listeners 父組件傳過來原生的dom事件
    -->
  
    <div>
      <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        v-on="$listeners"
      >
    </div>
  </template>
  
  <script>
  export default {
    // props: ['placeholder', 'style', 'class']
    // props: ['placeholder']
    inheritAttrs: false
  }
  </script>