当前位置: 首页 > Web前端 > HTML

Vue忽略的8个基本知识点

时间:2023-03-29 10:56:01 HTML

1、提供(provide)和注入??(inject)这对选项需要配合使用,让一个祖先组件向它所有的后代注入一个依赖,不管这个组件有多深hierarchy是,并且会一直在上下游关系建立的时候生效。第一种用法:provide直接提供一个静态对象,inject注入这个对象提供的key,然后使用letchild={//subcomponentinject:['king','three'],//子组件接收data数据(){return{age:25}},mounted(){console.log(this.king,this.three)//使用父组件提供的数据}}letvm=newVue({provide(){//父组件提供数据。或者提供:{king:'js',three:25}return{king:'js',three:25}},data(){return{name:'js1'}},components:{child}})两个用法:provice提供自己组件的数据源,inject注入这个对象,然后使用letchild={//subcomponentinject:['vmData','abc'],data(){return{age:25}},mounted(){console.log(this.vmData.name)//调用父组件提供的动态name属性console.log(this.abc)}}letvm=newVue({provide(){return{vmData:this,abc:123}},data(){return{name:'js1'}},components:{child}})第三种用法:对于inject接收对象的情况**letchild={inject:{vmd:'vmData',//vmData是provide提供的字段名abccc:'abc'//abc是provide提供的字段名},data(){return{age:25}},mounted(){console.log(this.vmd.name)//调用父组件提供的动态名称属性console.log(this.abccc)}}letvm=newVue({provide(){return{vmData:this,abc:123}},data(){return{name:'js1'}},components:{child})}2、动态属性和动态事件js

data:{methodname:'dblclick',someattr:'title'}方法:{onEvent(){console.log(123);}}3.给style的一个属性绑定多个值js
data:{sty1:{background:'red',fontSize:'40px',display:['-webkit-box','-ms-flexbox','flex']}}4、模板包裹多个元素显示隐藏abc
123
***可以用template包裹,template不会真正渲染到页面上js

h3

data:{abc:true,},5.Attributesnotreceivedbythechildcomponentprop'父组件传递给子组件的属性,如果子组件没有接收props,这些属性将被添加到该组件的根元素如果不想让组件的根元素继承非prop属性,可以在组件的选项中设置inheritAttrs:false。例如:Vue.component('my-component',{inheritAttrs:false,//...})也可以指定元素继承非prop属性:通过$attrsVue.component('com',{inheritAttrs:false,props:['abc'],template:`
`})最终呈现为注意inheritAttrs:false选项不会影响样式和类的绑定。样式和类将照常继承6.$listeners将组件事件绑定到任何内部标签。如果直接在组件上绑定blur事件,但是子组件的根元素不一定是input事件,那么在其他标签上监听blur事件就可以了。静默失败,所以使用$listeners将事件传递给其他元素Vue.component('com',{inheritAttrs:false,props:['num'],computed:{inputListeners(){//将事件对象保存到Computed属性letvm=this;returnObject.assign({},this.$listeners,{//this.$listeners在使用组件时添加事件对象input(event){//这是为了兼容v-model默认输入事件vm.$emit('input',event.target.value)}})}},template:`
我是大标签
`})7,.synctoProp数据的双向绑定通常在使用组件时,$emit("update:propertyname",newvalue)由子组件触发更新父组件的数据。该函数的快捷方式:.sync修饰符{{obj.name}}//绑定对象//or//bind定义单个属性
data:{val:3,obj:{name:'js',age:25}}subcomponenttemplate:`
自动更新obj的name值我是内容
`8、@hook:声明周期(监控子组件声明周期)Vue.component('com',{data(){return{obj:{name:'js',age:25}}},props:[],methods:{aaa(){this.obj.name='js1'}},template:`
aaaevent

`})父组件//监听子组件更新生命周期methods:{md(){console.log('子组件数据更新触发');}},