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

作者: 翔子丶 | 来源:发表于2021-04-07 10:03 被阅读0次

准备——处理组件边界情况
封装Vue.js组件库
(Vue)组件：父子组件传值（$parent，$root，$ch
Vue 处理边界情况
vue 处理边界情况
Vue01组件化实践-02组件通信边界情况
【vue学习】处理边界情况
# 错误边界
Vue处理边界之$root、$parent、$refs
LeetCode-Simplify Path

访问根实例$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']

$attrs/$ 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>