2022-12-17
props:
1.功能:让组件接收外部数据
2.数据传递:<Demo name="xx"/>
3.接收数据:第一种(只接收):props:['name'],第二种(限制类型):props:{name:String},
第三种(限制类型、限制必要性、指定默认值):props{name:{type:String,required:true,defult:'老王'}}
4.props是只读的,Vue底层会检测你对props的修改,如果你修改了会做出警告
mixin(混合):
1.功能:可以把多个组件公用的配置提取成一个混入对象
2.使用方法:第一步定义混合,{data(){....}}
第二步使用混合:mixins:['xxx'](局部),Vue.mixin(xxx)(全局)
插件:
1.自定义一个插件:export defult { install(){可以写全局的vue配置和方法}}
2.插件的使用:导入后,使用Vue.use(插件名)
scoped:
1.作用:让样式在局部生效防止冲突
2.写法:<style scoped>
2022-12-18:
1.组件化编码流程:
(1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
(2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
1)一个组件在用:放在组件自身即可。
2)一些组件在用:放在他们共同的父组件上(状态提升)。
(3)实现交互:从绑定事件开始
2.props适用于:
(1)父组件==>子组件 通信
(2)子组件==>父组件 通信(要求父组件先给一个函数)
3.使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
4.props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
webstorage:
1.浏览器通过Window.sessionStorage和window.localStorage属性来实现本地存储机制。
2.相关api:
1.setItem('key','value')==>值存储
2.getItem('key')==>获取值
3.removeItem('key')==>删除某值
4.clear()==>清除值
3.Window.sessionStorage关闭浏览器存储数据丢失,window.localStorage关闭浏览器存储数据不丢失
2022-12-23:
1.绑定自定义事件:
使用v-on方法写(app):<MyPhone v-on:getPhoneName="getPhoneName"/> 再定义对应的方法
组件:<button @click="sendName">发送型号</button> 方法:this.$emit('getPhoneName',this.name)
使用ref与生命周期钩子mounted组合:
app:<MyPhone ref="phone"/> 生命周期钩子里:this.$refs.phone.$on('getPhoneName',this.getComputerName)
组件:<button @click="sendName">发送型号</button> 方法:this.$emit('getPhoneName',this.name)
2.解绑自定义事件:
this.$off('解绑的事件')//解绑单个,
this.$off(['',''])//解绑多个
this.$off()//解绑所有
destroy()销毁函数也可以解绑所有的自定义事件
3.组件绑定原生事件:使用修饰符.native
2022-12-24:
1.全局事件总线:
需要所有组件都可访问到因此直接使用vm,在main.js中写beforeCreate(){vue.protopy.$bus=this}
使用时在组件中直接this.$bus.$on('事件名',回调函数),当组件销毁时销毁事件 beforeDestory(){this.$bus.$off('事件名')}
调用:this.$bus.$emit('事件名',参数)
2.消息订阅与发布
注:先需要下载pubsub库 npm i pubsub-js
消息订阅:需要先导入pubsub:import pubsub from ‘pubsub-js’
进行消息订阅:this.pubId=pubsub.subscribe('消息名称',回调函数)
消息订阅释放:pubsub.unsubscribe(this.pubId)
消息发布:pubsub.publish('消息名称',data)
3.$nextTick(回调函数):在下一次Dom更新结束后执行其指定的回调,当改变数据后,要基于更新后的dom进行某些操作时使用。