乐趣区

关于前端:Vue-被忽略的8个基础知识点

jiezi

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('子组件数据更新触发'); 
  }
},
退出移动版