封装vue.js 组件库

组件化开发

开源组件库：element-yi，iview
CDD

• CDD(component-Driven Development)
• 自下而上
• 从组建级别开始，到页面级别结束

好处：

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

处理组件的边界情况

• $root--通过$root可以访问vue的根实例,操作根实例的成员
• KaTeX parse error: Expected 'EOF', got '#' at position 8: parent/#̲children -- 获取…parent可操作父组件成员，可替换props使用，但是大多数情况都不推荐使用
• $refs – 访问子组件，表单的验证方法就是使用refs
• 依赖注入provide/inject

$root 的使用

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

$parent 的使用

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

$children 的使用

父
<template>
  <div>
    <children1></children1>
    <children2></children2>

    <button @click="getChildren">获取子组件</button>
  </div>
</template>

<script>
import children1 from './02-children1'
import children2 from './03-children2'
export default {
   
  components: {
   
    children1,
    children2
  },
  methods: {
   
    getChildren () {
   
      console.log(this.$children)
      console.log(this.$children[0].title)
      console.log(this.$children[1].title)

      this.$children[0].handle()
      this.$children[1].handle()
    }
  }
}
</script>

子
<template>
  <div>children1</div>
</template>

<script>
export default {
   
  data () {
   
    return {
   
      title: 'children1 获取子组件 - title'
    }
  },
  methods: {
   
    handle () {
   
      console.log(this.title)
    }
  }
}
</script>

$refs 方法，或取到对应组件的dom对象，调用对应组件的方法
点击触发方法，让子组件选中，并修改值

<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>
myinput 组件
<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注入进来，更深的组件也可以使用inject成员，获取到的值不要进行改变，不是对应的响应式的

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