1.首先写好里面的模板及传递过来的参数
2.定义一个index.js并引入刚创建的组件并export defaut(vue)=>{
vue.component(组件名,组件)
}
3.在main.js里面引入 然后vue.use(引入的名称)

Vue封装一个js引用
Vue封装的js里面可以是个对象 也可以是方法
export 和 export default的区别是 在一个页面中 export可以有很多个
但是export default只能有一个 常见的使用方法是
在一个js中export 一个方法 在main.js中调用的时候 需要 import { wsStart } from ‘./ws’
这就是在ws.js里面封装的wsStart方法被导出来了 在页面中用wsStart()就可以调用
也可以把所有的方法放在一个对象中 然后这个对象再赋值给一个变量 最后导出、
export default 变量名 然后在main.js里面 把这个变量名挂载Vue的原型链上
就可以在任何页面调用

export default 出来的一个变量如果是对象中的方法 那么这个变量挂在Vue
的原型链上在每个页面都可以调用 如 发送请求的封装
而 export 出来的 方法 如果挂在原型链上面 会打印出整个字符串方法
而如果不挂在原型链上面而只在main.js里面引入 在别的页面使用不了
而如果想在别的页面使用就得在别的页面引入 但是可以方便计算 如封装一个
计算时间的函数 在哪个页面需要 就引入一下然后传参调用

而如果想要封装一个组件 到别的页面也可以使用 那就得首先定义好props
在子组件中定义好方法 如果子组件想要修改父组件中的数据 那就封装一个
muation 在 store中 也可以封装几个然后父组件传给子组件需要调用的muation
里面的方法名称调用 也可以通过$emit来修改

Logo

前往低代码交流专区

更多推荐