vue高级进阶( 一 ) 组件精髓概述

前言

这个系列可能会分为几部分：

1. 基础以及高级用法总结
2. 一些比较有代表性的实战
3. 源码解析（一定是用最粗俗，不对，是最通俗的语言讲解，这个我可以保证）

总之一定对得起高级进阶这几个字。。。

组件分类

vue组件主要包含：

1. 由vue-router产生的页面，可以称之为路由组件
2. 独立基础组件：例如Date和input这之类的可以全局复用的基础组件
3. 业务组件，除了以上两种就是业务组件

组件精髓

props

• tppe 类型
• default 默认
  • 如果是对象，数组，必须要写成方法进行返回

msg:{
    type: Array,
    default: ()=>([])
}

• validator 校验，有一个参数value
• inheritAttrs 是否继承html特性
• 子组件不能修改父组件传递过来的prop

event

方法一

<parent-com @on-click="handleClick"></parent-com>

子组件
<button>点击</button>
在子组件中触发
this.$emit('on-click', event)

方法二

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>

子组件
<button>点击</button>

slot

<slot> 节点就是指定的一个插槽的位置,v-slot:[name]可以指定插槽的位置，有了name就叫具名插槽

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素 父组件

    <slotshow>
        <p>{{msg}}</p>
        <h6 slot="xxx">就是没有废话！</h6>

        vue2.6以上的版本是这样的
        <h6 v-slot:xxx>就是没有废话！</h6>
    </slotshow>
 

子组件

    <div class="slotcontent">
        <slot></slot>
        <slot name="xxx"></slot>
    </div>
 

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样，插槽的内容就可以使用这个传递过来的数据在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象.

列表组件

var childNode = {
 template: `
     <ul>
     // 通过:text="item.text"进行传值
     <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
     </ul>
 `,
 data(){
     return{
          items:[
              {id:1,text:'第1段'},
              {id:2,text:'第2段'},
              {id:3,text:'第3段'},
          ]
        }
    }
};

var parentNode = {
 template: `
 <div class="parent">
    <p>父组件</p>
     <child>
            // 通过props进行接收
          <template slot="item" scope="props">
          <li>{{ props.text }}</li>
          </template>
     </child>
 </div>
 `,
 components: {
    'child': childNode
 },
};
 

组件通信(第二篇会详细讲解8种用法)

1. ref：给元素或组件注册引用信息；
2. $parent / $children：访问父 / 子实例。
3. props 父向子传递
4. $emit和$on,子----->父
5. vuex

一些碎知识

1. 改变数组某一项的方法:

   1. 直接改变对象的引用
   2. 可以使用push,shift等方法
   3. 可以使用vue的变异方法

   Vue.set(vm.userinfo,2,{a:1})  == vm.$set(vm.userinfo,2,{a:1})
    
   

2. is属性

   <table>
       <tr id="row"></tr>  注意is的使用 table中只能使用tr
   </table>
    
   

3. 在子组件中的data必须是一个function,来return 一个对象，这是为了保证每一个实例的data属性都是独立的，不会相互影响