6.Vue学习记录(props、插件、事件)

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进行某些操作时使用。