准备——处理组件边界情况

官方网站

• 访问根实例$root

  小型应用中可以在 vue 根实例里存储共享数据，组件中可以通过 $root 访问根实例，不过这个模式扩展到中大型应用来说就不然了

  <!-- 01-root.vue -->
  <div>
      <!--
      小型应用中可以在 vue 根实例里存储共享数据
      组件中可以通过 $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 可以用来从一个子组件访问父组件的实例，触达父级组件会使得你的应用更难调试和理解

  <!-- 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 选项允许我们指定我们想要提供给后代组件的数据/方法

  <!-- 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属性绑定到内部组件

  $listeners：把父组件中的DOM对象的原生事件绑定到内部组件

  如果不希望组件的根元素继承 attribute，在组件的选项中设置 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 接收
         会自动设置到子组件内部的最外层标签上
         如果是 class 和 style 的话，会合并最外层标签的 class 和 style 
    -->
    <!-- <input type="text" class="form-control" :placeholder="placeholder"> -->
  
    <!--
      2. 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承
         然后通过 v-bind="$attrs" 把外部传入的非 prop 属性设置给希望的标签上
  
         但是这不会改变 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>