共计 3093 个字符，预计需要花费 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('子组件数据更新触发');
}
},
正文完
