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