<vue动态子组件的两种实现方式
您的当前位置:首页正文

vue动态子组件的两种实现方式

2023-12-06 来源:六三科技网

文章目录

  • 方式一:局部注册所需组件
  • 使用缓存
  • 方式二:动态注册组件实现
  • 让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

    通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件。

    方式一:局部注册所需组件

    <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></component></div><script>var home = {template:'<div>我是主页</div>'};var post = {template:'<div>我是提交页</div>'};var archive = {template:'<div>我是存档页</div>'};new Vue({ el: '#example', components: { home, post, archive, }, data:{ index:0, arr:['home','post','archive'], }, computed:{ currentView(){ return this.arr[this.index]; } }, methods:{ change(){ this.index = (++this.index)%3; } }})</script>

    使用<keep-alive>缓存

    <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    基本用法:

    <div id="example"> <button @click="change">切换页面</button> <keep-alive> <component :is="currentView"></component> </keep-alive></div>

    条件判断

    如果有多个条件性的子元素,<keep-alive> 要求同时只有一个子元素被渲染:

    <div id="example"> <button @click="change">切换页面</button> <keep-alive> <home v-if="index===0"></home> <posts v-else-if="index===1"></posts> <archive v-else></archive> </keep-alive></div><script>new Vue({ el: '#example', components:{ home:{template:`<div>我是主页</div>`}, posts:{template:`<div>我是提交页</div>`}, archive:{template:`<div>我是存档页</div>`}, }, data:{ index:0, }, methods:{ change(){ let len = Object.keys(this.$options.components).length; this.index = (++this.index)%len; } }})</script>

    activated 和 deactivated

    activated 和 deactivated 在 <keep-alive> 树内的所有嵌套组件中触发:

    <div id="example"> <button @click="change">切换页面</button> <keep-alive> <component :is="currentView" @pass-data="getData"></component> </keep-alive> <p>{{msg}}</p></div><script>new Vue({ el: '#example', data:{ index:0, msg:'', arr:[ { template:`<div>我是主页</div>`, activated(){ this.$emit('pass-data','主页被添加'); }, deactivated(){ this.$emit('pass-data','主页被移除'); }, }, {template:`<div>我是提交页</div>`}, {template:`<div>我是存档页</div>`} ], }, computed:{ currentView(){ return this.arr[this.index]; } }, methods:{ change(){ var len = this.arr.length; this.index = (++this.index)% len; }, getData(value){ this.msg = value; setTimeout(()=>{ this.msg = ''; },500) } }})</script>

    include和exclude

    include 和exclude属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

    <!-- 逗号分隔字符串 --><keep-alive include="a,b"> <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 v-bind) --><keep-alive :include="/a|b/"> <component :is="view"></component></keep-alive><!-- Array (use v-bind) --><keep-alive :include="['a', 'b']"> <component :is="view"></component></keep-alive>

    匹配首先检查组件自身name选项,如果name选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配。

    <keep-alive include="home,archive"> <component :is="currentView"></component> </keep-alive>

    上面的代码,表示只缓存home和archive,不缓存posts

    方式二:动态注册组件实现

     asyncComponents(templateName){ this.curNavComponents = require(`./components/${templateName}.vue`).default;}

    总结

    以上所述是小编给大家介绍的vue动态子组件的两种实现方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    小编还为您整理了以下内容,可能对您也有帮助:

    vue中父组件如何动态修改子组件的值?

    1.使用ref修改

    $refs:

    在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象.

    创建两个组件分别是父组件:aaa.vue 子组件:bbb.vue

    父组件操作(aaa.vue)

    在子组件上添加ref=“child”命名。

    给按钮添加一个方法,

    方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。

    方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1

    /*父组件*/

    登录一下吧

    子组件操作(bbb.vue)

    2.使用props传递父传子

    props是通过父组件值扔给给子组件,子组件使用props来接住值!

    父组件操作(aaa.vue)

    给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”

    在data中定义对应的dlshow

    /*父组件*/

    登录一下吧

    子组件操作(bbb.vue)

    使用props接收父组件扔过来的key键和参数类型。

    原文链接:https://blog.csdn.net/m0_57146100/article/details/119617880

    vue中父组件如何动态修改子组件的值?

    1.使用ref修改

    $refs:

    在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象.

    创建两个组件分别是父组件:aaa.vue 子组件:bbb.vue

    父组件操作(aaa.vue)

    在子组件上添加ref=“child”命名。

    给按钮添加一个方法,

    方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。

    方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1

    /*父组件*/

    登录一下吧

    子组件操作(bbb.vue)

    2.使用props传递父传子

    props是通过父组件值扔给给子组件,子组件使用props来接住值!

    父组件操作(aaa.vue)

    给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”

    在data中定义对应的dlshow

    /*父组件*/

    登录一下吧

    子组件操作(bbb.vue)

    使用props接收父组件扔过来的key键和参数类型。

    原文链接:https://blog.csdn.net/m0_57146100/article/details/119617880

    Vue加载组件、动态加载组件的几种方式

    什么是组件:

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

    下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示:

    //正常加载

    import index from '../pages/index.vue'

    import view from '../pages/view.vue'

    //懒加载

    const index = resolve => require(['../pages/index.vue'], resolve)

    const view = resolve => require(['../pages/view.vue'], resolve)

    //懒加载 - 按组

    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')

    const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')

    // 懒加载 - 按组 import,基于ES6 import的特性

    const index = () => import('../pages/index.vue')

    const view = () => import('../pages/view.vue')

    补充:Vue动态加载组件的四种方式

    动态加载组件的四种方式:

    1、使用import导入组件,可以获取到组件

    var name = 'system';

    var myComponent =() => import('../components/' + name + '.vue');

    var route={

    name:name,

    component:myComponent

    }

    2、使用import导入组件,直接将组件赋值给componet

    var name = 'system';

    var route={

    name:name,

    component :() => import('../components/' + name + '.vue');

    }

    3、使用require 导入组件,可以获取到组件

    var name = 'system';

    var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));

    var route={

    name:name,

    component:myComponent

    }

    4、使用require 导入组件,直接将组件赋值给componet

    var name = 'system';

    var route={

    name:name,

    component(resolve) {

    require(['../components/' + name + '.vue'], resolve)

    }

    }

    总结

    以上所述是小编给大家介绍的Vue加载组件、动态加载组件的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!Vue组件的使用

    通过ref来获取页面上的dom

    若在一个组件<item>中添加上ref,那么获取到的dom就是对应的组件,也就是可以获取到组件的引用。

    可以获取到组件中定义的data数据

    父组件传值给子组件通过属性来传。

    过来的值赋值给定义的值,然后修改那个值

    子组件通过事件触发来向父组件传值

    定义一个全局组件

    父组件给子组件通过属性传递一些值,而子组件做的一些约束就是组件的参数校验

    父组件要传一个名叫content的属性,而子组件刚好定义了content的prop,这个就是props特性

    非props特性

    例如:给子组件的标签中定义一个click事件

    上面的实现是错误的,原因就是在子组件中定义的@click中的click是监听的自定义事件的名称,它是接收子组件触发的事件名称,如:this.$emit('click'),@click是接收这样的事件的,并不是我们熟知的点击事件

    实现上面的例子

    方法一:

    方法二

    在click中添加.native就可标明为原生事件

    方法一,使用Vuex

    方法二,使用发布订阅模式,也称为总线机制

    怎么使父组件给子组件优雅的传递dom,例如父组件要给子组件传递<p>Dell</p>

    按以往的方法应该是

    使用slot可以解决问题

    如果template中有多个<slot>,那怎么确定哪个slot要那些dom呢

    可以通过名称来确定对应的dom,如

    通过动态组件来怎么实现呢

    切换的时候,每次都是先销毁,然后再创建子组件,每次切换都销毁和创建

    v-once就是为了避免这种情况的发生,使用v-once第一次展示的时候,会将组件放到内存中,第二次就不需要创建组件了,可以直接从内存中读取到

    参考

    Vue.js API文档

    慕课网:Vue2.5开发去哪儿网App 从零基础入门到实战项目

    六三科技网还为您提供以下相关内容希望对您有帮助:

    vue中父组件如何动态修改子组件的值?

    1.使用ref修改 refs:在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象.创建两个组件分别是父组件:aaa.vue 子组件:bbb.vue 父组件操作(aaa.vue)在子组件上添加r...

    Vue加载组件、动态加载组件的几种方式

    在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示://正常加载im...

    Vue组件的使用

    方法一,使用Vuex 方法二,使用发布订阅模式,也称为总线机制 怎么使父组件给子组件优雅的传递dom,例如父组件要给子组件传递Dell 按以往的方法应该是 使用slot可以解决问题 如果template中有多个&lt;slot&gt;,那怎么确定哪个slot要...

    简单了解vue中父子组件如何相互传递值(基础向)

    通过v-bind属性把item的值动态赋给content变量)子组件:通过props接收父组件传递的值子组件向父组件传递值子组件:通过$emit()方法发布事件广播父组件:捕获到子组件向外触发的事件,然后可执行相应的方法下图为子组件通过$em...

    Vue父组件向子组件传值 (props)、子组件改变父组件的值($emit)

    第一步:在父组件的data中声明需要改变的变量名称 第二步:通过$emit改变父组件的值,有两种方式: 传参、事件函数 第二步:在子组件标签上绑定参数 第三步:需要一个事件函数,将值通过$emit发出 第二步:在子组件标签...

    Vue中动态增加表单项的方法

    1、将table组件声明在一个 &lt;template&gt; 标签下,用以根据后台数据进行动态加载。2、对表格中需要编辑的内容,可以在 &lt;template&gt; 标签下声明一个输入框,并使用插槽来实现数据的绑定。3、与上面相同的,声明一个 addRow() ...

    vue父子组件数据传输以及实现父子组件数据双向绑定

    在子组件中props的方式接受,这里有两种方法:props:['rules','model'],还有就是图片中对象的方式,只是对象的方式能够设定传值的类型。在子组件中的使用如第二个红色的标出的部分,直接使用...

    vue子父组件通信怎么实现

    传递的方式也分为两种:一种为静态数据,直接传数据,一种为动态传递,动态绑定属性 子组件通过 props 选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据了。emit(eventName, [...

    15《Vue 入门教程》Vue 动态组件 &amp; keep-alive

    最终的实现效果是:当点击按钮的时候会动态切换展示的组件。keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 ...

    vue父组件向子组件传值

    (2)子组件使用props使用cmsg来接收父组件的内容 (3)动态传值,用v-bind指令来动态绑定props的值 (4)使用props传值是单项的 2.子组件向父组件传值 通过$emit()实现 (1)使用Vue里面的$emit方法发送一个自...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    Top