品牌推广策略包括哪些内容,宁波seo快速排名,黑龙江省建设安全教育信息网,杭州做营销型网站1.父向子版 父组件设置自定义属性 子组件props接收
//父组件环境下
my-demo :自定义属性名字要传递的具体值/my-demo
//子组件
export default{
props:[自定义属性名字]
}
2.子向父版 父组件设置自定义方法并绑定接收的方法 子组件触发方法
//…1.父向子版 父组件设置自定义属性 子组件props接收
//父组件环境下
my-demo :自定义属性名字要传递的具体值/my-demo
//子组件
export default{
props:[自定义属性名字]
}
2.子向父版 父组件设置自定义方法并绑定接收的方法 子组件触发方法
//父组件环境下
my-demo 自定义方法绑定的方法/my-demo
export default{methods:{绑定的方法(v1){console.log(v1)//abb1}}
}
//子组件
export default{methods:{xxx(){this.$emit(自定义方法,abb1)//可以传多个参数}}
} 3.全局事件总线
//1.创建bus.js 文件
// bus.js文件内容
import Vue from vue
// export default new Vue()
const Bus new Vue()
export default Bus//2.在main.js中使用
import Bus from ./utils/bus // 这是我的路径正确引用你们的路径//3.在需要的地方触发事件
this.$bus.$emit(allclear,type)//4. 接收事件的地方接收并下一步处理mounted() {this.$bus.$on(allclear, (type) {// console.log(type)if (type this.fathercomname) {if (this.value) {this.value undefined}}})
}4.Vuex
用这个的话首先要装包或者创建工程的时候选择这个选项手脚架会给你装好
//新建store 文件
//文件内容
import Vue from vue
import Vuex from vuex
import getters from ./getters
import app from ./modules/app
Vue.use(Vuex)//模块化
const store new Vuex.Store({modules: {app,},getters
})export default store//模块化文件内容 具体的看自己的功能哈
import Cookies from js-cookie//这个模块是用来检测屏幕视窗的
const state {sidebar: {opened: Cookies.get(sidebarStatus) ? !!Cookies.get(sidebarStatus) : true,withoutAnimation: false},device: desktop
}const mutations {TOGGLE_SIDEBAR: state {state.sidebar.opened !state.sidebar.openedstate.sidebar.withoutAnimation falseif (state.sidebar.opened) {Cookies.set(sidebarStatus, 1)} else {Cookies.set(sidebarStatus, 0)}},CLOSE_SIDEBAR: (state, withoutAnimation) {Cookies.set(sidebarStatus, 0)state.sidebar.opened falsestate.sidebar.withoutAnimation withoutAnimation},TOGGLE_DEVICE: (state, device) {state.device device}
}const actions {toggleSideBar({ commit }) {commit(TOGGLE_SIDEBAR)},closeSideBar({ commit }, { withoutAnimation }) {commit(CLOSE_SIDEBAR, withoutAnimation)},toggleDevice({ commit }, device) {commit(TOGGLE_DEVICE, device)}
}export default {namespaced: true,state,mutations,actions
}//getter的内容
const getters {sidebar: state state.app.sidebar,device: state state.app.device,
}
export default getters//在main.js导入
import store from ./store//在对应组件中使用
import { mapGetters } from vuex;computed: {...mapGetters([device]),},
5.路由
抽象一点说路由也算通信方式的一种吧 这种跨组件跨页面 路由传参
//例子
this.$router.push({name: GanttChart,params: {id: id,business_file: business_file,},});
6.浏览器资源传参
有cookie localstrage 之类的 总归不过是是get set
import Cookies from js-cookie//名字
const TokenKey xxxxx//向外导出一个获取的方法
export function getToken() {return Cookies.get(TokenKey)
}//向外导出一个设置的方法
export function setToken(token) {//过期时间跟着后台设置的时间 后台给的是一个时间戳 算了一下是当前时间30日后过期 return Cookies.set(TokenKey, token,{expires:30})
}//向外导出一个移除的方法
export function removeToken() {return Cookies.remove(TokenKey)
}
