Vue 被忽略的8个基础知识点

1、provide(提供)和inject(注入)

这对选项需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效

第一种用法 ：provide直接提供静态对象，inject注入这个对象提供的key，即可使用

let child = {                  //子组件
  inject:['king','three'],     //子组件接收数据
    data(){
      return {
        age:25
    }
  },
  mounted(){
      console.log(this.king,this.three)  //使用父组件提供的数据
  }
}

let vm = new Vue({
    provide(){      //父组件提供数据。  或者  provide:{king:'js',three:25}
        return {    
          king:'js',
          three:25
        }
    },
    data(){
        return {
            name:'js1'
        }
      },
    components:{
        child
    }
})

第二种用法 ：provice提供自身组件的data数据源，inject注入这个对象，即可使用

let child = {                  //子组件
  inject:['vmData','abc'],
    data(){
      return {
        age:25
    }
  },
  mounted(){
      console.log(this.vmData.name)   //调用父组件提供的动态name属性
        console.log(this.abc)
  }
}

let vm = new Vue({
  provide(){      
     return {
        vmData:this,
        abc:123
    }
  },
  data(){
    return {
        name:'js1'
    }
  },
  components:{
    child
  }
})

第三种用法 ：针对inject用对象接收的情况**

let child = {
    inject:{
        vmd:'vmData',    //  vmData为provide提供的字段名
        abccc:'abc'    //  abc为provide提供的字段名
    },
    data(){
      return {
        age:25
    }
  },
  mounted(){
      console.log(this.vmd.name)   //调用父组件提供的动态name属性
        console.log(this.abccc)
  }
}

let vm = new Vue({
  provide(){      
        return {
        vmData:this,
        abc:123
    }
  },
   data(){
        return {
            name:'js1'
        }
  },
  components:{
      child
  }
)}

2、动态属性和动态事件

<div @[methodname]="onEvent" :[someattr]="'我是内容'">  <!--此处绑定为dbclick事件及title属性-->
  js
 </div>

data: {
    methodname:'dblclick',
    someattr:'title'
}

methods: {
  onEvent() {
    console.log(123);
  }
}

3、style的某个属性绑定多个值

<div :style="sty1">
 js
</div>

data: {
  sty1: {
    background: 'red',
    fontSize: '40px',
    display: ['-webkit-box', '-ms-flexbox', 'flex']  
  }
}

4、template包裹多个元素显示隐藏

<button @click="abc=!abc">abc</button>
<div>123</div>

<template v-if="abc">  *** 可以用template包裹，template不会真正渲染在页面
    <div :style="sty1">js</div>
    <h3>h3</h3>
</template>


data: {
  abc: true,
},

5、未被子组件prop接收的属性'

父组件传的属性给子组件，如果子组件没有用prop接收，这些 属性 会被添加到这个组件的根元素上。
如果你不希望组件的根元素继承非prop属性，你可以在组件的选项中设置 inheritAttrs: false。例如：

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

也可以指定元素继承非prop属性：通过 $attrs

<com v-model="num" style="background:red" b="2" d="d" abc="666"> </com>

Vue.component('com', {
    inheritAttrs:false,
    props: ['abc'],
    template: `
      <div><h1 v-bind="$attrs"></h1></div>
   `
})

最终渲染为

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。style和class会照常继承

6、$listeners将组件事件绑定到内部任意标签

如果在组件上直接绑定一个blur事件， 但是子组件根元素不一定是input事件，所以在其他标签上监听blur事件就静默失败，所以要用$listeners把事件转移到其他元素身上

Vue.component('com', {
  inheritAttrs: false,
  props: ['num'],
  computed: {
    inputListeners() {                             //把事件对象存到计算属性
      let vm = this;
      return Object.assign({}, this.$listeners, {  //this.$listeners使用组件时添加的事件对象
        input(event) {                   //此处是为了兼容v-model的默认input事件
          vm.$emit('input', event.target.value)
        }
      })
    }
  },
  template: `
     <div>
       <h1 v-bind="$attrs">我是大标签</h1>
       <input type="text" :value="num" v-on="inputListeners"/>   
                                       <!--用v-on 接收代理全部事件到input身上-->
     </div>
 `
})

<com v-model="num" @blur="onBlur" style="background:red" b="2" d="d" abc="666"> </com>

7、.sync对Prop数据进行双向绑定

通常使用组件时通过子组件触发$emit("update:属性名",新值) 来更新父组件的数据

该功能的快捷方法：.sync修饰符

<div class="wrap">
  {{obj.name}}
  <com v-bind.sync="obj" > </com>   //绑定对象
  
  // 或者<com :title.sync="val" > </com>   //绑定单个属性
</div>
        

data: {
  val: 3,
  obj: {
    name: 'js',
    age: 25
  }
}

子组件
template: `
    <div>
        <h1  
          @click="$emit('update:name','新的name值')">        自动更新obj的name值
           我是内容          
        </h1>
     </div>
  `

8、@hook:声明周期(监听子组件声明周期)

Vue.component('com', {
  data() {
    return {
      obj: {
        name: 'js',
        age: 25
      }
    }
  },
  props: [],
  methods: {
    aaa() {
      this.obj.name = 'js1'
    }
  },
  template: `
    <div>
        <p @click="aaa">aaa事件</p>
    </div>
  `
})


父组件
<com @hook:updated="md"></com>  //监听子组件updated生命周期
methods: {
  md() {
    console.log('子组件数据更新触发'); 
  }
},