wordpress建站案例视频教程,安全生产规章制度建筑公司网站,北京工商注册公司,三墩网站建设Vue学习笔记
一、非父子通信-event bus 事件总线 作用#xff1a;非父子组件之间#xff0c;进行简易消息传递。#xff08;复杂场景用----Vuex#xff09; 使用步骤#xff1a; 创建一个都能访问的事件总线 #xff08;空Vue实例#xff09;-----utils/EventBus.js
/…Vue学习笔记
一、非父子通信-event bus 事件总线 作用非父子组件之间进行简易消息传递。复杂场景用----Vuex 使用步骤 创建一个都能访问的事件总线 空Vue实例-----utils/EventBus.js
// 1.创建一个都能访问你的时间总线空闲的Vue实例
import Vue from vueconst Bus new Vue()export default BusA组件接受方监听Bus的 $on事件
script
import Bus from ../utils/EventBus
export default {created(){// 2.在A组件接收方)进行监听Bus的事件订阅消息Bus.$on(sendMsg,(msg) {consloe.log(msg)})}
}
/scriptB组件发送方触发Bus实例的事件
script
//导入事件总线
import Bus from ../utils/EventBus
export default {methods:{clickSend(){// 3.B组件(发送方)触发事件的方式来传递参数发布消息Bus.$emit(sendMsg,今日天气不错)}}
}
/script二、非父子通信拓展----provideindect跨层级共享数据 provideindect作用跨层级共享数据 语法
父组件 provide提供数据
export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}子/孙组件 inject获取数据
export default {inject: [color,userInfo],created () {console.log(this.color, this.userInfo)}
}注意
provide提供的简单类型的数据不是响应式的复杂类型数据是响应式。推荐提供复杂类型数据子/孙组件通过inject获取的数据不能在自身组件内修改
三、子组件与父组件之间的双向绑定
3.1、原理介绍 v-model本质上是一个 语法糖(语法的简写)。例如应用在输入框上就是value属性 和 input事件 的合写(不同的表单元素会有所不同) 作用提供数据的双向绑定
数据发生改变页面就会自动变 :value(v-bind:value‘实例中的数据’)页面输入改变数据会自动变化 input 注意$event 用于在模板中获取事件的形参
下面两种写法等价
templatediv classapp1:input v-modelmsg1 typetext/br!-- 模版中获取事件的形参 - $event获取 --2:input :valuemsg2 input msg2 $event.target.value typetext//div
/template不同的表单元素 v-model在底层的处理机制是不一样的。比如给checkbox使用v-model 底层处理的是 checked属性和change事件。
3.2、表单类组件封装v-model简化代码
表单类组件封装—实现了子组件和父组件数据的双向绑定 父传子数据 应该是父组件props传递过来的v-model拆解绑定数据 子传父监听输入子传父值给父组件修改 App.vue
templatediv classapp!-- $event就可以拿到当前子传父的形参 --BaseSelect :cityIdselectId changeId selectId $event/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data(){return{selectId: 102}},components:{BaseSelect:BaseSelect}
}BaseSelect
templatediv!-- 父传子 :valuecityId --select :valuecityId changehandlerChange option value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {props:{cityId: String },methods:{handlerChange(e){//e.target.value 获取下拉菜单的值// alert(e.target.value)this.$emit(changeId,e.target.value)}}}
/scriptstyle
/style注意不是自己的数据不能用v-model实现双向绑定只能通过将v-model拆解利用父子通信的手段进行修改。’
父组件v-model简化代码实现子组件和父组件的双向绑定 相比与上述代码并没有大致区别只是将子组件的一些名字替换为value与input从而在父组件中利用v-model实现数据绑定 v-model其实就是 :value和input事件的简写 步骤
子组件props通过value接收数据事件触发 input父组件v-model直接绑定数据
输入框子组件通信
App.vue
templatediv classapp!-- BaseSelect :valueinputValue inputinputValue $event/BaseSelect --!-- :valueinputValue inputinputValue $event 等价于v-modelinputValue --BaseSelect v-modelinputValue/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data(){return{inputValue: i love china}},components:{BaseSelect:BaseSelect}}
/scriptstyle/styleBaseSelect
templatediv!-- 父传子 :valuecityId --input typetext :valuevalue changehandleChange/div
/templatescript
export default {props:{value: String },methods:{handleChange(e){//e.target.value 获取下拉菜单的值// alert(e.target.value)this.$emit(input,e.target.value)}}}
/scriptstyle
/style四、.sync修饰符(重要)
作用可以实现子组件与父组件的双向绑定简化代码 特点prop属性名可以自定义非固定为value用v-model 场景封装弹框类的基础组件visible属性 true显示 false隐藏 本质就是 :属性名和update:属性名 合写 子父组件的使用方式 弹出框数据 App.vue
templatediv classappbutton click isShow true 退出按钮/button!-- :visible.sync 等价于 :visible 和update:visible整合 --!-- BaseDialog :visible.syncisShow/BaseDialog --!-- $event用来接收 this.$emit(update:visible,false)的参数 --BaseDialog :visibleisShow update:visible isShow $event/BaseDialog/div
/templatescript
import BaseDialog from ./components/BaseDialog.vue
export default {data() {return {isShow: false,}},components: {BaseDialog,}
}
/scriptstyle
/styleBaseDialog
templatediv classbase-dialog-wrap v-showvisiblediv classbase-dialogdiv classtitleh3温馨提示/h3button classclose clickclosex/button/divdiv classcontentp你确认要退出本系统么/p/divdiv classfooterbutton clickclose确认/buttonbutton clickclose取消/button/div/div/div
/templatescript
export default {props: {visible: Boolean,},methods:{close(){this.$emit(update:visible,false)}}
}
/scriptstyle scoped
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
/style五、ref和$ref
5.1、获取dom BaseChart
templatediv classbase-chart-box refmyCharts子组件/div!-- --
/templatescript
// yarn add echarts 或者 npm i echarts
import * as echarts from echarts
// import echarts from echartsexport default {mounted() {// 基于准备好的dom初始化echarts实例// this.$refs.myCharts替代document.querySelector(.base-chart-box)查找范围是当前页面的盒子var myChart echarts.init(this.$refs.myCharts)// 绘制图表myChart.setOption({title: {text: ECharts 入门示例,},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})},
}
/scriptstyle scoped
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
/style5.2、获取组件实例 App.vue
templatediv classapph4父组件 -- button clickgetData获取组件实例/button/h4BaseFromVue reffromVue/BaseFromVuedivbutton clickgetData获取数据/buttonbutton clickresetData重置数据/button/div/div
/templatescript
import BaseFromVue from ./components/BaseFrom.vueexport default {components: {BaseFromVue :BaseFromVue},data(){return{user :{username : ,password : }}},methods: {getData(){var user this.$refs.fromVue.getFromValue()// alert(user.username)this.useruser},resetData(){this.$refs.fromVue.resetFrom()}}
}
/scriptstyle
/styleBaseFrom.vue
templatediv classappdiv账号: input v-modelusername typetext/divdiv密码: input v-modelpassword typetext/div/div
/templatescript
export default {data(){return{//定义数据username : ,password : }},methods:{//获取到表单数据并返回getFromValue(){console.log(用户名this.username)return{username : this.username,password : this.password}},resetFrom(){this.usernamethis.password}}
}
/scriptstyle scoped
.app {border: 2px solid #ccc;padding: 10px;
}
.app div{margin: 10px 0;
}
.app div button{margin-right: 8px;
}
/style六、Vue异步更新、$nextTick
需求:点击编辑按钮显示编辑框并让编辑框自动聚焦
this.isShowEdit true //控制显示this.$refs.inp.focus() //利用ref得到Dom聚焦问题“显示后”立即获取焦点失败 原因Vue是异步更新Dom提升性能
解决方法 $nextTick等Dom更新后才会触发方法里的函数体 语法this. $ nextTick methods: {editFn() {// 显示输入框(异步dom更新)---this.$refs.inp获取不到Domthis.isShowEdit true //$nextTick(this.$nextTick((){// 获取焦点this.$refs.inp.focus() })//setTimeout等待的时间不精准 -------- 推荐使用 $nextTick()// setTimeout(() {// this.$refs.inp.focus() // }, 100);} }
