3-4-封装Vue.js组件库

一、组件库介绍

1. 开源组件库

• Element-UI
• IView

2. 组件开发方式CDD

• 自下而上
• 从组件级别开始，到页面级别结束

3. CDD的好处

• 组件在最大程度上被重用
• 并行开发
• 可视化测试

二、处理组件边界情况

vue中处理组件边界情况的API

1. $root

01-root.vue

<template>
  <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>
</template>

<script>
export default {
    

}
</script>

<style>

</style>

2. $parent /​ $children

• $parent

01-parent.vue

<template>
  <div class="parent">
    parent
    <child></child>
  </div>
</template>

<script>
import child from './02-child'
export default {
    
  components: {
    
    child
  },
  data () {
    
    return {
    
      title: '获取父组件实例'
    }
  },
  methods: {
    
    handle () {
    
      console.log(this.title)
    }
  }
}
</script>

<style>
.parent {
    
  border: palegreen 1px solid;
}
</style>

02-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>

<script>
import grandson from './03-grandson'
export default {
    
  components: {
    
    grandson
  }
}
</script>

<style>
.child {
    
  border:paleturquoise 1px solid;
}
</style>

03-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>

<script>
export default {
    
}
</script>

<style>
.grandson {
    
  border:navajowhite 1px solid;
}
</style>

• $children

  通过数组索引获取对应的children

3. $ref

01-parent.vue

<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()
      this.$refs.mytxt.value = 'hello'
    }
  }
  // mounted () {
    
  //   this.$refs.mytxt.focus()
  // }
}
</script>

<style>

</style>

02-myinput.vue

<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>

<style>

</style>

4. 依赖注入provide/inject

注意：inject进来的数据是非响应式的。

01-parent.vue

<template>
  <div class="parent">
    parent
    <child></child>
  </div>
</template>

<script>
import child from './02-child'
export default {
    
  components: {
    
    child
  },
  provide () {
    
    return {
    
      title: this.title,
      handle: this.handle
    }
  },
  data () {
    
    return {
    
      title: '父组件 provide'
    }
  },
  methods: {
    
    handle () {
    
      console.log(</