礼品网站模板,苏州网站优化,政务信息系统网站建设规范,滨州wordpress建站目录
1 scoped解决样式冲突
2 data写法
3 组件通信
3.1 父子关系
3.1.1 父向子传值 props
3.1.2 子向父传值 $emit
3.2 非父子关系
3.2.1 event bus 事件总线
3.2.2 跨层级共享数据 provideinject
4 props
4.1 介绍
4.2 props校验完整写法
5 v-model原理
…目录
1 scoped解决样式冲突
2 data写法
3 组件通信
3.1 父子关系
3.1.1 父向子传值 props
3.1.2 子向父传值 $emit
3.2 非父子关系
3.2.1 event bus 事件总线
3.2.2 跨层级共享数据 provideinject
4 props
4.1 介绍
4.2 props校验完整写法
5 v-model原理
5.1 应用表单类组件封装
5.1.1 不用v-model的写法
5.1.2 用v-model的写法
5.1.3 sync 修饰符
6 ref 与 $refs
6.1 获取dom元素
6.2 获取组件
7 Vue异步更新与$nextTick 1 scoped解决样式冲突
问题
写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
解决方法
可以给组件加上scoped 属性,可以让样式只作用于当前组件
如
style scoped/style
scoped原理 自动执行 当前组件内标签都被添加data-v-hash值 的属性 css选择器都被添加 [data-v-hash值] 的属性选择器 最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到 2 data写法 一个组件的 data 选项必须是一个函数 目的是为了保证每个组件实例维护独立的一份数据对象 每次创建新的组件实例都会新执行一次data 函数得到一个新对象 如
script
export default {data: function () {return {count: 100,}},
}
/script 3 组件通信 总结 父子通信 1.props $emit 父向子传值子通知父改值 3.1 1.1 v-model简写不可自定义属性值 5.1.2 1.2 sync简写可自定义属性值 5.1.3 2.ref $refs 父主动拿子的方法与属性 6.2 非父子通信 1.event bus 事件总线任意组件 3.2.1 2.跨层级通信同一家族组件 3.2.2 3.1 父子关系 父组件通过 props 将数据传递给子组件 子组件利用 $emit 通知父组件修改更新 3.1.1 父向子传值 props 步骤 给子组件以添加属性的方式传值子组件内部通过props接收模板中直接使用 props接收的值 App.vue父组件
template!-- 主体区域 --section idapp!--第一步给子组件挂上list属性并将值赋值给list属性--TodoMain :listlist deldel/TodoMain/section
/templatescript
//...data() {return {list: [{id: 1, content: 吃饭},{id: 2, content: 睡觉},{id: 3, content: 打豆豆}],}},}
/script
TodoMain.vue子组件
注意此处props为简略用法完整写法见下文4.2 props校验完整写法
template!-- 列表区域 --section classmainul classtodo-list!--第三步直接使用list变量--li classtodo v-for(item, index) in list :keyitem.id!--...--/li/ul/section
/templatescript
export default {//第二步props接收数据简略写法props: [list],
}
/script3.1.2 子向父传值 $emit
此处为子通知父父为被动下文中的$refs为父主动拿子 步骤 $emit触发事件给父组件发送消息通知 父组件监听$emit触发的事件 提供处理函数在函数的性参中获取传过来的参数 TodoMain.vue子组件
template!-- 列表区域 --section classmainbutton clickdel(item.id) /button/section
/templatescript
export default {
//...methods: {dela(id) {//第一步触发delb事件this.$emit(delb, id1)}}
}
/script
App.vue父组件
template!-- 主体区域 --section idapp!--监听子组件触发的delb事件监听到后执行delc函数并将子组件传过来的id1值用id2接收--TodoMain delbdelc/TodoMain/section
/templatescript
//...
export default {//...methods: {delc(id2) {console.log(id2)},},}
/script
此为最基本写法可以进一步化简使用v-model或sync修饰符具体见 5 v-model原理 3.2 非父子关系
3.2.1 event bus 事件总线
任意两个组件之间的通信 非父子组件之间进行简易消息传递。(复杂场景→ Vuex)
Event Bus事件总线可以有多个发送方与多个接收方 第一步创建事件总线实例
首先创建一个新的 Vue 实例作为事件总线通常命名为 eventBus
这个实例就像一个中央枢纽负责管理所有的事件
因为 Vue 实例本身具有 $on监听事件、$emit触发事件和 $off移除事件监听器方法所以可以利用这些方法来实现事件的发布和订阅
// EventBus.js
import Vue from vueconst Bus new Vue()export default Bus
在使用Bus事件总线时需要先导入Bus这个实例对象
import Bus from ../utils/EventBus 第二步订阅事件监听事件
在需要接收数据或响应某个事件的组件中使用 Bus.$on 方法来监听特定的事件 $on 方法接受两个参数 第一个参数是事件名称字符串 第二个参数是当事件触发时要执行的回调函数 // 组件 A 中监听事件
Bus.$on(sendMsg, (msg) {this.msg msg
}) 第三步发布事件触发事件
在需要发送数据或通知其他组件的组件中使用 eventBus.$emit 方法来触发特定的事件 $emit 方法的参数 第一个参数是事件名称必须与要监听的事件名称一致 后面参数不限制个数及数据类型这些参数会传递给监听该事件的回调函数 Bus.$emit(sendMsg, 这是一个消息) 第四步取消事件监听移除事件监听器
选学
在组件销毁或不再需要监听事件时可以使用 Bus.$off 方法来移除事件监听器防止内存泄漏
Bus.$off([event, callback]) 参数说明 event可选要移除的事件名可以是一个字符串或一个包含多个事件名的数组。如果省略该参数则会移除所有事件监听器 callback可选要移除的特定回调函数。如果省略该参数则会移除该事件名下的所有回调函数 3.2.2 跨层级共享数据 provideinject
父子、爷孙等之间的通信
父组件 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获取的数据不能在自身组件内修改
inject中的属性值值也可以写成对象形式可以设置的值 from 用于指定从祖先组件注入的属性名。如果不使用 from则默认使用当前定义的属性名作为注入的属性名 default 用于指定注入属性的默认值当祖先组件没有提供对应的属性时会使用这个默认值 inject: {// 使用 from 指定注入属性的来源名称myUserInfo: {from: userInfo,// 设置默认值default: {name: 默认姓名,age: 0}},// 没有使用 from默认使用当前属性名注入someValue: {default: 默认值}}, 4 props
4.1 介绍
定义
组件上 注册的一些 自定义属性
作用
向子组件传递数据
特点 可以 传递 任意数量 的prop 可以 传递 任意类型 的prop 4.2 props校验完整写法
语法
props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},
示例
script
export default {// 完整写法类型、默认值、非空、自定义校验props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val 100 || val 0) {console.error(传入的范围必须是0-100之间)return false} else {return true}},},},
}
/script
注意 1.default和required一般不同时写因为当时必填项时肯定是有值的 2.default后面如果是简单类型的值可以直接写。如果是复杂类型的值则需要以函数的形式return一个默认 5 v-model原理
v-model本质上是一个语法糖。例如应用在输入框上就是value属性 和 input事件 的合写
templatediv idapp input v-modelmsg typetextinput :valuemsg inputmsg $event.target.value typetext/div
/template注意 1.$event 用于在模板中获取事件的形参 2.不同的表单元素 v-model在底层的处理机制是不一样的比如给checkbox使用v-model 底层处理的是 checked属性和change事件 5.1 应用表单类组件封装
5.1.1 不用v-model的写法
此处就是父子组件通讯的方法 3.1
App.vue
templatediv classappBaseSelect :selectIdselectId changeCityselectId $event/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data() {return {selectId: 102,}},components: {BaseSelect,},
}
/scriptstyle
/style
BaseSelect.vue
templatedivselect :valueselectId changeselectCityoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {props: {selectId: String,},methods: {selectCity(e) {this.$emit(changeCity, e.target.value)},},
}
/scriptstyle
/style 5.1.2 用v-model的写法
注意使用前需要先基于5.1.1的代码稍作修改 App.vue
templatediv classapp!--1.给子组件挂在的属性名为value 2.监听input事件--BaseSelect :valueselectId inputselectId $event/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data() {return {selectId: 102,}},components: {BaseSelect,},
}
/scriptstyle
/style
BaseSelect.vue
templatediv!--绑定value值--select :valuevalue changeselectCityoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {props: {//接收value值value: String,},methods: {selectCity(e) {//更改所触发的事件为inputthis.$emit(input, e.target.value)},},
}
/scriptstyle
/style
完成上述修改后可以对父组件App.vue中的代码进行简化
原
BaseSelect :valueselectId inputselectId $event/BaseSelect
改
BaseSelect v-modelselectId /BaseSelect
此种方法缺点也显而易见固定死了属性名必须传value
以下方法可以自定义属性名 5.1.3 sync 修饰符
.sync修饰符 就是 :属性名 和 update:属性名 合写
!--父组件--
!-- .sync写法 --
BaseDialog :visible.syncisShow /
--------------------------------------
!-- 完整写法 --
BaseDialog :visibleisShow update:visibleisShow $event /
对比一下上面的v-model :value 变成了 :属性名 事件类型 变成了 update:属性名 因此在组件中可以使用自定义属性名了
但是在子组件触发的事件变成了 update:属性名
//子组件
props: {visible: Boolean
},this.$emit(update:visible, false)
除此之外其他与上述一样本质上还是最基本的props、$emit通信 6 ref 与 $refs 利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例 查找范围 → 当前组件内(更精确稳定) 而之前用document.querySelect(.box) 获取的是整个页面中的盒子 6.1 获取dom元素
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div
2.恰当时机通过 $refs获取 this.$refs.xxx 获取
console.log(this.$refs.chartRef)
恰当时机指的是页面渲染完mouted时期及以后 6.2 获取组件
1.给目标组件添加ref属性
BaseForm refbaseForm/BaseForm
2.恰当时机通过 this.$refs.xxx 获取目标组件
this.$refs.baseForm.组件方法()this.$refs.baseForm.属性名 7 Vue异步更新与$nextTick
需求
编辑标题, 编辑框自动聚焦 点击编辑显示编辑框 让编辑框立刻获取焦点
代码
templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickeditFn编辑/button/div/div
/templatescript
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {editFn() {// 显示输入框this.isShowEdit true // 获取焦点this.$refs.inp.focus() } },
}
/script
问题
显示之后立刻获取焦点是不能成功的
原因Vue 是异步更新DOM (提升性能)
解决方案
$nextTick等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() {this.$refs.inp.focus()
})
注意$nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例
