首页 > 编程知识 正文

vue动态生成自定义组件,vue自定义控件

时间:2023-05-04 06:38:00 阅读:239212 作者:4367

在用vue构建项目的过程中,我们有时会用到别人开发的组件如vue-router;使用他人组件的正常步骤如下:

1、命令行进行安装,执行install;

2、在vue项目中的入口文件main.js中,进行导入;

3、然后用Vue.use(plugin)引入该组件。

我们也可以创造属于自己的组件, 具体步骤如下:

1、在components文件中创建test文件;

2、在test文件中,创建index.js和Test.vue;

3、Test.vue中的代码如下:

实现自定义组件

export default{

data () {

return {

msg: 'hello vue'

}

},

components: {}

}

4、test文件夹下的index.js中的代码如下:

import MyTest from './Test.vue'

const Test = {

install (Vue) {

Vue.component('Test', MyTest)

}

}

export default Test

5、入口文件main.js进行相关的配置:

import Test from './components/test'

Vue.use(Test)

6、如此这般,就可以在其它组件中正常使用,如下:

自定义组件Test的内容("实现自定义组件")将会展示出来。

注:test文件指的是自定义组件文件夹;index.js指的是组件的入口加载文件;Test.vue指的是组件模板。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。