精华内容
下载资源
问答
  • 前言在深入了解Vue动态创建Component前先了解一下常规组件声明形式。Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 。常规组件声明与注册...

    前言

    在深入了解Vue动态创建Component前先了解一下常规组件声明形式。

    Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 。

    常规组件声明与注册

    // 定义一个名为 button-counter 全局注册的组件

    Vue.component("button-counter", {

    template: 'You clicked me {{ count }} times.',

    data() {

    return {

    count: 0

    }

    }

    });

    new Vue({

    template: `

    App Component

    `

    }).$mount("#app");

    在上面的代码中我们声明了一个叫做 button-counter 的组件。如果在常规情况下使用的话,只需要在页面上写对应的 标签就够了。

    全局创建注册组件可以实现动态创建,但是我们必须在 template 声明使用该组件,而且如果把所有组件都全局注册这并不是一个好办法。

    在官方文档中我们可以看到,我们可以通过 Vue.component('component-name') 的方式来注册一个组件。

    而组件实例又有 $mount 这样一个方法,官方对于 $mount 的解释如下:

    vm.$mount( [elementOrSelector] )

    Arguments:

    {Element | string} [elementOrSelector]

    {boolean} [hydrating]

    Returns: vm - the instance itself

    Usage:

    If a Vue instance didn't receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.

    If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.

    The method returns the instance itself so you can chain other instance methods after it.

    那我们是否可以通过这种方式来达到我们的需求呢?

    还不够!

    为什么???

    因为 Vue.component 返回的结果是一个 function!它返回的并不是 组件实例,而是一个构造函数。

    那到这里其实我们就清楚了。 对于 Vue.component 声明的组件,我们先通过 Vue.component 获取它的构造函数,再 new 出一个组件实例,最后 通过 $mount 挂载到 html 上。

    // 定义一个名为 button-counter 全局注册的组件

    Vue.component("button-counter", {

    template: 'You clicked me {{ count }} times.',

    data() {

    return {

    count: 0

    }

    }

    });

    new Vue({

    template: `

    App Component

    click to insert button-counter comonent

    `,

    methods: {

    insert() {

    const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件

    const instance = new ButtonCounter();

    instance.$mount("#insert-container");

    }

    }

    }).$mount("#app");

    上述代码中,Vue.component 先获取到组件的构造函数,然后构造实例,通过实例的一些方法来处理数据和挂载节点。

    但是我们发现 Vue.component 只负责全局注册或查找。

    如果想要针对局部注册的组件使用动态创建并添加我们需要使用 Vue.extend 基础Vue构造器创建"子类"达到目的。

    其实 Vue.component 方法传入的选项是一个对象时,Vue自动调用 Vue.extend。

    完整代码示例:

    const ButtonCounterComponent = {

    template: 'You clicked me {{ count }} times.',

    data() {

    return {

    count: 0

    }

    }

    };

    new Vue({

    template: `

    App Component

    click to insert button-counter comonent

    `,

    methods: {

    insert() {

    const ButtonCounter = Vue.extend(ButtonCounterComponent);

    const instance = new ButtonCounter();

    instance.$mount("#insert-container");

    }

    }

    }).$mount("#app");

    单文件应用

    在实际使用场景里,大部分都是用脚手架构建到项目,使用 *.vue 这种单文件方式注册组件。

    export default {

    data() {

    return {

    msg: "hello"

    }

    },

    created() {},

    mounted() {},

    destroy() {}

    };

    import *.vue 返回的就是模版中 script 中 export 部分。

    总结

    至此,我们知道了,全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项,我们可以结合实际情况去选择不同方案进行搭配即可。

    好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

    展开全文
  • vue动态切换组件component index.vue <template> <div> <button @click="change('test')">动态更改组件</button> <component :is="item"></component> <!--这个is绑定的...

    vue动态切换组件component

    index.vue

    <template>
      <div>
           <button @click="change('test')">动态更改组件</button>
           <component :is="item"></component>
          <!--这个is绑定的是注册的组件名 -->
      </div>
    </template>
    
    <script>
      import test from "./test"
      import jwq from './jwq'
        export default {
            name: "text",
             data () {
         	 	return {
                    item:''
          		}
        	},
             methods:{
         		change(e){
                    this.item=e
                }
        	},
            components: {
          		test,jwq
        	}
        }
    </script>
    
    <style scoped>
    
    </style>
    

    jwq.vue

    <template>
      <div>jwq</div>
    </template>
    
    <script>
        export default {
            name: "text"
        }
    </script>
    
    <style scoped>
    
    </style>
    
    

    test.vue

    <template>
      <div>zhn</div>
    </template>
    
    <script>
        export default {
            name: "test"
        }
    </script>
    
    <style scoped>
    
    </style>
    
    
    展开全文
  • Vue Component 总结

    2021-06-25 03:23:11
    vuecomponent思想允许我们复用UI组件,减少功能重复的代码。...用户可以通过自定义的标签调用这个插件。...正文开始:使用自定义的component,首先需要创建一个component,并且将其注册到Vue的作用域中,...

    vue的component思想允许我们复用UI组件,减少功能重复的代码。通过对html和样式文件以及js文件的封装,使其成为一个具有独立功能的小插件;用户可以通过自定义的标签调用这个插件。

    本文简单介绍component的基本用法,结合在开发过程中的具体应用场景进一步举例说明,方便大家理解。

    正文开始:

    使用自定义的component,首先需要创建一个component,并且将其注册到Vue的作用域中,之后,我们就可以使用自定义的组件了。

    //component 声明与注册

    Vue.component('my-component', {

    template:'

    Hello vue component!
    '

    })

    // 创建根实例

    newVue({

    el:'#app'

    })

    注册之后,我们可以在html中使用自定义的component了:

    注意:组件命名的方式,在js和html中的转换。

    渲染后的结果为:

    Hello vue component!

    以上是对静态资源的封装;而通常使用component的情例如景是将动态的数据,与html模板进行封装,形成一个独立并且可复用的组件。例如菜单栏,表格插件,分页插件。下面以常见的菜单栏进行说明:

    这个菜单组件需要满足以下几点要求:

    1、用户可以使用vue-menu标签调用该组件

    2、菜单中的目录内容是动态渲染的

    既然需要动态渲染子目录,需要开发人员定义渲染的数据,因此,采用props进行“父组件”向“子组件”的消息传输。

    首先先要明白父组件与子组件的含义:在component中,自定义标签称为父标签,而封装其中的html称为子标签。因此,可以说props完成数据从封装好的外部组件向内部html渗入的过程。

    先上代码:

    menu.vue

    export default{

    name:"vueMenu",

    props:["menu"],

    }

    main.vue

    import vueMenu from "../../components/menu.vue"

    export default{

    name:"App",

    components: {

    vueMenu

    },

    data(){

    return{

    menu:[

    {name:"系统管理",link:"sys"}

    {name:"系统管理",link:"sys"}

    {name:"系统管理",link:"sys"}

    ]

    }

    }

    }

    展开全文
  • 为什么选择自己封装第三方库最近几个月我司把之前两三年的所有业务都用了 vue 重构了一遍,前台使用 vue+ssr,后台使用了 vue+element,在此过程中封装和自己写了很多 vue component。其实vuecomponent 相当简单...

    为什么选择自己封装第三方库

    最近几个月我司把之前两三年的所有业务都用了 vue 重构了一遍,前台使用 vue+ssr,后台使用了 vue+element,在此过程中封装和自己写了很多 vue component。其实vue 写 component 相当简单和方便,github上有很多的 vue component 都只是简单的包装了一些 jquery 或者原生 js 的插件,但我个人是不太喜欢使用这些第三方封装的。理由如下:

    很多第三方封装的组件参数配置项其实是有缺损的。如一些富文本或者图表组件,配置项远比你想想中的多得多,第三方封装组件很难覆盖全部所有配置。

    第三方组件的更新频率很难保证。很多第三方封装组件并不能一直和原始组件保持同步更新速度,万一原始组件更新了某个你需要的功能,但第三方并没有更新那岂不是很尴尬,而且很多第三方组件维护一段时间之后就不维护了。

    灵活性和针对性。还是那富文本来说,富文本在我司有很多定制化需求,我们需要将图片上传七牛,需要将图片打水印,需要很多针对业务的特殊需求,使用第三方包装的组件是不合适的,一般基于第三方封装的组件是很难拓展的。

    所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。

    动手开干

    接下来我们一起手摸手教改造包装一个js插件,只要几分钟就可以封装一个专属于你的 vue component。封装对象:countUp.js,改造后结果 vue-countTo。

    首先我们用官方提供的 vue-cli 来构建项目 这里选择了 webpack-simple (组件相对而言比较简单,不需要很多复杂的功能,所以 webpack-simple 已经满足需求了)

    $ npm install -g vue-cli

    $ vue init webpack-simple my-project

    $ cd my-project

    $ npm install

    安装countup.js

    $ npm install countup.js

    $ npm run dev

    启动项目之后按照 countup.js 官方 demo 初始化插件

    app.vue

    import CountUp from 'countup.js'

    export default {

    name: 'countup-demo',

    data () {

    return {

    numAnim:null

    }

    },

    mounted(){

    this.initCountUp()

    },

    methods:{

    initCountUp(){

    this.numAnim = new CountUp(this.$refs.countup,0, 2017)

    this.numAnim.start();

    }

    }

    }

    刷新页面,就这么简单,countUp.js 已经生效了。

    接下来查看 countUp.js 的 github 发现它定义了如下可配置参数

    对应 vue 就是 props,类型和初始化一目了然。

    props: {

    start: {

    type: Number,

    default: 0

    },

    end: {

    type: Number,

    default: 2017

    },

    decimal: {

    type: Number,

    default: 0

    },

    duration: {

    type: Number,

    default: 2.5

    },

    options: {

    type: Object

    }

    }

    之后再将countup之前写死的配置项替换为动态props就可以了

    this.numAnim = new CountUp(this.$refs.countup,

    this.start,

    this.end,

    this.decimal,

    this.duration,

    this.options)

    使用组件

    只要几分钟一个属于自己的原生组件就包装好了,就是这么简单。完整demo

    这时候你如果觉得使用countUp.js 还有些不满足你的需求,那你可以选择自己来造轮子了。

    造轮子篇

    首先当然是阅读源码了

    其实源码也就两部分核心代码

    第一部分:主要是就是 requestAnimationFrame,在游览器不支持requestAnimationFrame 的情况下使用 setTimeout来模拟,这段代码值得仔细阅读,自己在平时的项目中也能借鉴使用这段代码。

    第二部分:就是 count 函数

    看懂这两部分之后造轮子就相当的简单了, demo

    造轮子过程中发现 countUp,并没有 autoplay 这个参数项可以让组件自动开始count,没关系。。。我们可以自己来撸,我们首先定义 autoplay 这个props为布尔值,默认所有组件 autoplay 为 true

    props:{

    autoplay: {

    type: Boolean,

    required: false,

    default: true

    }

    }

    定义好 props 之后只要在 mounted 生命周期内加一个判断就完事了。

    mounted() {

    if (this.autoplay) {

    this.start();

    }

    }

    我们的 countUp 组件可以自动 count 了!

    上传 npm

    在不跨项目的情况下之前所做的已经满足需求了。但我们不能就此满足,我想让世界上更多的人来使用我的插件,这时候就要上传 npm了 demo 。

    首先我们新建一个index.js

    import CountTo from './vue-countTo.vue'

    // 导出模块

    export default CountTo

    //global 情况下 自动安装

    if (typeof window !== 'undefined' && window.Vue) {

    window.Vue.component('count-to', CountTo)

    }

    同时我们也要改造一下 webpack 的配置,因为不是所有使用你组件的人都是通过 npm 安装使用 import 引入组件的的。

    还有很多人是通过

    library: 'CountTo',

    libraryTarget: 'umd',

    umdNamedDefine: true

    大功告成,现在只要将它发布到 npm 就可以了,首先注册一个npm 账号,

    之后配置自己的 package.json (注意填写 version,每次发布的 version 不能相同;main 为入口文件地址)。

    之后只要一行命令 npm publish 你的项目就发到 npm 了,快让小伙伴们一起来用你的vue component 吧!

    9e49e65c4ef8

    image.png

    总结

    这里这是拿了一个很简单的 countUp 组件举了一个简单例子,有的时候自己动手丰衣足食,很多插件的封装比想象中简单的多。产品经理再也不会看到我因为这个fu**插件怎么不支持这个功能而愁眉苦脸了,我们可以更好地满足产品了~~

    完整项目地址:https://github.com/PanJiaChen/vue-countTo 欢迎 star

    占坑

    展开全文
  • 作为组件而不是数据项,但您肯定需要将容器作为动态组件,因为这是将文本数据转换为vue托管dom的唯一方法。 new vue({el:'#app',data:{precontent:"lt; h1 id = \ "creating-new-contexts \"gt;创建新的上下文...
  • Vue动态创建组件并插入到页面中

    千次阅读 2021-02-01 22:14:13
    最近在板砖途中遇到一个需要动态创建Vue组件并插入到页面上的需求,之前没有遇到过这类需求,经过一番百度搞定这个问题,在这里写下总结,作为回顾。 心得 动态创建组件依靠Vue.extend 案例引入 现在有下面这样一个...
  • 1vue -router 数据是存在缓存中,存在刷新丢失(类似vuex),router 添加路由在 路由守卫里统一处理; 1.登录->添加路由->刷新丢失->路由登录前->添加—>统一 路由守卫是添加(大一统) import Main from "@/components/...
  • 基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的、特定的组件内容,而不需要大量的 import 组件并进行 component 注册Index.vueimport loader from './EntryLoader.vue'export default {components: {...
  • import Vue from 'vue'Vue.component('order-btn', {render:function(createElement){let self = thisreturn createElement('div',{on:{click:function(){console.log('success')}},},self.order2Operate(self.statu...
  • 文章目录1. 引言2....《Java程序员从零开始学Vue(02)- Vue环境搭建、项目创建及运行》 《Java程序员从零开始学Vue(03)- Vue开发利器VsCode》 《Java程序员从零开始学Vue(04)- VsCode断点调试》
  • 一、 啰嗦几句在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都...
  • vue3中jsx写法实现动态组件

    千次阅读 2021-03-30 17:54:21
    vue2和vue3的动态组件在模板语法中写起来很简单,但是换成jsx后,俩版本的写法有很大的差异
  • Vue.js中的动态html元素

    2021-06-12 18:10:56
    更新:基于this answer,您可以在Vue 2中执行类似的动态模板组件.您实际上可以在计算部分中设置组件规范并使用:is绑定它var v = new Vue({el: '#vue',data: {message: 'hi #linky'},computed: {dynamicComponent: ...
  • Vue实战之组件(Component) 12.1 组件作用 组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不能业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用...
  • import Vue from 'vue' const path = require('path') const filName = require.context('../public', true, /\.vue$/) filName.keys().forEach(item => { const name = path.basename(item, '.vue') Vue....
  • 可以用路由,v-if来做,这里我们用动态组件来实现 创建三个组件,Home,About,Category <button v-for="item in tabs" :key="item" @click="itemClick(item)" :class="{ active: currentTab === item }" ...
  • 这篇文章分享了从遇到前端业务性能问题,到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程。初始加载资源过多问题起源于我们的一个页面,下面是这个页面的截图和初次请求的...
  • Vue动态添加组件的两种实现

    千次阅读 2020-12-26 18:41:52
    Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现。这大概就是对代码走火入魔的一种...
  • vue3-动态组件

    2021-09-29 13:44:38
    动态的显示不同的组件: 实现方法: 在父组件的数据里面定义一个数据,用来记录当前展示组件名称,例如:currentItem 定义多个子组件 父组件里的模板中,添加 component 标签,其中绑定 is 属性: <component :...
  • 官方对component 的属性 is的解释:有的时候,在不同组件之间进行动态切换是非常有用的,可以通过 Vue 的元素加一个特殊的isattribute来实现、拿我们自己话来说就是多个组件使用同一个挂载点,并动态切换,并且IS...
  • 默认情况下,当组件在切换的时候都会重新创建组件,但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 &...
  • vue动态路由创建

    2020-12-28 11:07:01
    if(data.length==1){ result.push({ path:"myName", component:resolve=>require(["@/views/Main.vue"],resolve), meta:{ label:"个人中心", }, children }) }else{ result.push({ path:`${data[0].path}`, ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • Vue提供了全局的内置组件,这些组件主要完成的都是功能封装 动态组件、缓存组件、分发组件 多个组件使用同一个挂载点,然后动态地在他们之间切换,称为动态组件 用法:<component :is=""></component>...
  • Vue中实现动态路由

    2021-07-18 21:04:46
    动态路由设置一般有两种: 简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,...
  • 1.后端返回的JSON数组如何转换成vue-router可以接收的格式。(主要问题在compoent从string转换成组件上) 2.将转换后的数组给ant-design的MENU组件渲染。 这边我用了mock模拟后端返回。因为后端不会帮我们拼树形...
  • 能够构建出色的单页应用程序(SPA)是 Vue.js 最具有吸引力的功能之一。SPA 非常好,因为它们不需要在...在本教程中,我将介绍设置 Vue Router 的基础知识,并研究一些更高级的技术,例如:动态路由匹配导航挂钩(Na...
  • Vue Render函数创建DOM节点的案例发布时间:2020-07-09 09:33:44来源:亿速云阅读:105作者:清晨小编给大家分享一下Vue Render函数创建DOM节点的案例,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!...
  • vue动态生成表单

    2020-12-28 10:55:59
    利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件 在利用组件的数据通信去收集各个子组件的数据 实现demo 三个表单组件,用了element-ui, 此处用了自定义组件的v-model来收集子组件的数据 /...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,814
精华内容 7,925
关键字:

vue的component动态创建

vue 订阅