一、界面
界面东西仿佛不多，罗列一下。
1、v-if可以在标签内使用，包括<template>，但不能在插槽{{}}内进行判断
2、在标签内控制组件显隐有三种方法
（1）、v-if="show"——操作dom
（2）、v-show="show"——添加移除"display:none;"
（3）、v-model=“show”——双向绑定，用于引入其他页面，控制其他页面的显隐，可用于一个显示一个页面
类似vant组件标签可以放置在任何地方，但一般放置在底部
3、vant组件用法
在组件上添加v-model=“show”控制显隐，或者用v-model进行传值，并数据绑定
场景一：点击文本域，弹出弹窗，在弹窗上输入内容，绑定到文本域中
@click点击文本域，v-model控制弹窗弹出，在弹窗文本域中输入数据v-model一个数据字段到data数据中，在methods中进行赋值。
4、为空验证
判断几个文本域为空，则弹窗提示
连续的if-else if判断，根据data数据中对应文本域字段是否为空，如果true,弹窗显示为true，连续操作。
5、单页面tab控制两个页面显示
https://www.jb51.net/article/122451.htm
二、vue内的页面之间通讯
总结了几个方法：
1、插槽$refs
2、on、emit
3、store.dispatch存到store中
4、Bus
具体实现：
1、插槽$refs 【在组件内部操作数据在主页面返现】
主页面调用组件 name ，添加 ref 插槽
主页面调用 this.$refs.[组件name内部的方法函数]
若带参数，则将参数赋予组件内，进行数据操作
当然，也可以在本页面用插槽来指示位置，进行操作
2、on、emit 【子组件触发父组件】
组件 name 页面 this.$emit(“btn”) 触发主页面
主页面引入 name 组件，@btn="主页面btn"
也可以在本页面进行触发
3、store.dispatch存到store中
store.dispatch("user/setEvent",event)
store中的store
//数据
const state = {
event:[],//创建数组
}
//提交
const mutations = {
SET_EVENT:(state,data)=>{
state.event=data
}
}
//方法
const actions={
setEvent:({ commit },data)=>{
commit('SET_EVENT',data)
}
}
//获取
const getters={
event: state => state.event
}
export default {
namespaced:true,
state,
getters,
mutations,
actions
}
4、Bus——用于不同页面间单个数据发送与接收
一般在untils文件夹中新建bus.js文件，在应用页面引入，然后进行Bus.$emit和Bus.$on操作，切记添加销毁事件。
参考：https://www.jb51.net/article/191931.htm
三、特别项
1、vue中的provide和inject
provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
参考链接：
https://www.jb51.net/article/122451.htm
https://www.jb51.net/article/191931.htm
网友评论