1 组件通讯

1.1 :props(父传子)

// 数组:不建议使用
props:[]
// 对象
props:{
 inpVal:{
  type:Number, //传入值限定类型
  // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
  required: true, //是否必传
  default:200,  //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
  validator:(value) {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}

1.2 :$emit(子传父)

// 父组件
<home @title="title">
// 子组件
this.$emit('title',[{title:'这是title'}])

1.3 :provide和inject(隔代传参)

//父组件:
provide: { //provide 是一个对象,提供一个属性或方法
  foo: '这是 foo',
  fooMethod:()=>{
    console.log('父组件 fooMethod 被调用')
  }
},
// 子或者孙子组件
inject: ['foo','fooMethod'], //数组或者对象,注入到子组件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父组件下面所有的子组件都可以利用inject

2 获取父类DOM

$root：获取顶层父类DOM，访问根组件，并且可以访问所有下层子组件的DOM
$parent：获取上一层DOM
例子：父组件A 包含 子组件B
子组件B 包含 子组件C
如果要从子组件C想要获取顶层父类，那么两者的使用：
this.$root 相当于 this.$parent.$parent

// 父组件
<home ref="home"/>
mounted(){
  console.log(this.$refs.home) //拿到子组件的DOM，可以进行数据操作和方法操作
}

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

3 : attrs与$listeners

3.1 attrs使用场景

①如果父传子有很多值那么在子组件需要定义多个解决attrs获取子传父中未在 props 定义的值

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>
// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
}

②如果子组件定义了 props,打印的值就是剔除定义的属性

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
}

3.2 listeners使用场景

子组件需要调用父组件的方法，解决父组件的方法可以通过listeners” 传入内部组件——在创建更高层次的组件时非常有用，如果是孙组件要访问父组件的属性和调用方法，直接一级一级传下去就可以

// 第一种父组件
<home @change="change"/>
// 子组件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件
}
//第二种:子组件中
methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
}
//第三种:子组件中,然后父组件监听这个事件,父:  <child @fatherMethod="fatherMethod"></child>
methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
}
//第四种:父组件把方法传入子组件中，在子组件里直接调用这个方法
//父
<div>
    <child :fatherMethod="fatherMethod"></child>
</div>
//子
<button @click="childMethod()">点击</button>
 props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }

4 parent和children(两个均非响应式)

//父组件
mounted(){
  console.log(this.$children) 
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}
//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

5 render函数

 //初级版 根据 props 生成标签,性能较低
<template>
  <div>
    <div v-if="level === 1"> <slot></slot> </div>
    <p v-else-if="level === 2"> <slot></slot> </p>
    <h1 v-else-if="level === 3"> <slot></slot> </h1>
    <h2 v-else-if="level === 4"> <slot></slot> </h2>
    <strong v-else-if="level === 5"> <slot></slot> </stong>
    <textarea v-else-if="level === 6"> <slot></slot> </textarea>
  </div>
</template>

//优化版,利用render 函数减小了代码重复率，性能较高
<template>
  <div>
    <child :level="level">Hello world!</child>
  </div>
</template>
<script type='text/javascript'>
  import Vue from 'vue'
  Vue.component('child', {
    render(h) {
      const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level-1]
      return h(tag, this.$slots.default)
    },
    props: {
      level: {  type: Number,  required: true  } 
    }
  })   
  export default {
    name: 'hehe',
    data() { return { level: 3 } }
  }
</script>

6 递归组件

场景:如果开发一个 tree 组件,里面层级是根据后台数据决定的,这个时候就需要用到动态组件

// 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
// 设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
// 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
// 组件递归用来开发一些具体有未知层级关系的独立组件。比如：
// 联级选择器和树形控件 
<template>
  <div v-for="(item,index) in treeArr">
      子组件，当前层级值： {{index}} <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

递归组件必须设置name 和结束的阀值

7 components和 Vue.component

components:局部注册组件

export default{
  components:{home}
}

Vue.component:全局注册组件

Vue.component('home',home)