Vue 封装一个自己写的组件或方法

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来修改

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!