如何在html里封装vue组件,Vue 封装一个自己写的组件或方法

  • Post author:
  • Post category: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来修改

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。