vue-cli项目 创建全局组件(全局配置)及render函数使用

ps: 全局组件指的是全局配置,只需全局引入一次就能在 vue文件中使用

      局部配置指的的公共组件写在components中,每次使用都要引入,这二个概念需要区分清楚

1.目录结构

2.创建你要全局的一个组件页面,如下run.vue

3.在刚才创建的index.js页面引入你想要全局的组件

import Vue from 'vue'
import run from './views/run.vue'

Vue.component('run',run)
Vue.component('test', {
    render: function (createElement) {
        var self = this
        // 第一个参数是一个简单的HTML标签字符 “必选”
        // 第二个参数是一个包含模板相关属性的数据对象 “可选”
        return createElement('div', {
            'class': {
                foo: true,
                bar: false
            },
            style: {
                color: 'red',
                fontSize: '14px'
            },
            attrs: {
                id: 'boo'
            },
            domProps: {
                innerHTML: 'Hello Vue!'
            }
        })
    }
})

4.在main.js引入

5.在需要使用全局组件 的vue文件中使用

效果图:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值