精华内容
下载资源
问答
  • vue动态添加组件

    2021-09-28 22:50:46
    所以在弹窗显示的时候scope.row获取当前记录的信息,然后根据信息中的对应关键字段(如下面我代码中的programe_id)就是组件唯一的文件名,拼接一下就能动态添加组件 例如需要添加的组件如下: 核心代码 methods:{ ...

    使用场景

    有一个列表页如下,当我点击查看的时候,
    在这里插入图片描述
    会弹窗,弹窗的主要内容是组件,
    在这里插入图片描述

    每个组件的内容都不一样,我不可能在这个列表页把所有的组件都import进来,所以在弹窗显示的时候scope.row获取当前记录的信息,然后根据信息中的对应关键字段(如下面我代码中的programe_id)就是组件唯一的文件名,拼接一下就能动态添加组件

    例如需要添加的组件如下:
    在这里插入图片描述

    核心代码

    methods:{
      add(msg){
        let programe_id = msg.programe_id
        this.$options.components['appTable'] = require('@/components/apps/app' + programe_id+"temp.vue").default
      }
    },
    render: function (createElement) {
        return createElement('appTable')
    }
    
    
    展开全文
  • Vue动态添加组件的两种实现

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

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

    为页面动态添加组件,在实现区别上,我总结出了2种:

    1. 数据动态渲染已有组件。
    2. 先生成组件再添加到界面上。

    〇、提出需求

    假设现有一需求:要求实现某标签的添加,删除功能。效果如下:

    图1

    这种效果想必还是比较合适用来理解组件的动态添加和移除的。 下面将对两种实现方案分别进行讲述。在这之前先预览一下案列项目结构,不用担心,这是使用 vue-cli@3 工具创建的 项目,应该和大多数人的项目目录结构相似:

    图2

    一、数据动态渲染组件

    在 Vue 的官方文档中,条件渲染列表渲染这两处文档直接为你展示了如何通过数据来控制组件的渲染, 不过有一点要注意的是,Vue 官方文档,都是在讲述html文件中如何使用vue,而并没有在单文件组件的篇幅里进行 较多的讲解。虽然用法的确是相同的,但不免理解起来有一层隔阂。

    此处,就将以单文件组件解释说明如何完成组件的动态渲染,也就是动态的添加和移除什么的。

    1、建立标签组件

    使用数据来动态渲染组件,前提是要先有这个组件,所以就先把组件创建出来,在 components 目录下创建名为 tag.vue 的组件,组件代码如下:

     
    1. <!-- tag.vue -->
    2. <template>
    3. <div class="tag">
    4. {{text}}
    5. <button @click="onCloseClick">×</button>
    6. </div>
    7. </template>
    8.  
    9. <script>
    10. export default {
    11. name: "tag",
    12. props: {
    13. // 标签内容
    14. text: String
    15. },
    16. methods: {
    17. onCloseClick () {
    18. // 将删除标签事件暴露除去
    19. this.$emit("delete", this.text);
    20. }
    21. }
    22. }
    23. </script>
    24.  
    25. <style scoped>
    26. .tag {
    27. display: inline-block;
    28. margin: 3px;
    29. }
    30. </style>

    这个组件只有简单的删除功能,能够表示意思意思就好!

    2、修改页面,实现渲染

    修改 App.vue 文件,引入tag组件,然后根据数据对tag组件进行动态的渲染:

     
    1. <!-- App.vue -->
    2. <template>
    3. <div>
    4. <h3>标签管理</h3>
    5.  
    6. <!-- 标签容器已经被初始化而且内容多余0条,则显示内容 -->
    7. <div v-if="tags && tags.length > 0">
    8. <tag v-for="tag in tags" :text="tag" :key="tag" @delete="onTagDelete"/>
    9. </div>
    10.  
    11. <!-- 否则,标签只是被初始化了,但是没有数据 -->
    12. <div v-else-if="tags">没有标签了</div>
    13.  
    14. <!-- 标签容器还没被初始化 -->
    15. <div v-else>标签加载中...</div>
    16.  
    17. <button @click="addTag">添加标签</button>
    18. </div>
    19. </template>
    20.  
    21. <script>
    22. import Tag from './components/tag.vue';
    23. import Util from './Util';
    24.  
    25. export default {
    26. name: 'app',
    27. components: {
    28. Tag
    29. },
    30. created() {
    31. // 从网络加载tag数据.
    32. Util.getTagsFromNet()
    33. .then(result => {
    34. if (result.code !== 200) {
    35. return Promise.reject(new Error(result.message));
    36. }
    37.  
    38. // 数据加载成功,将数据赋值给 tags 即可。
    39. this.tags = result.data;
    40. })
    41. .catch(error => {
    42. window.alert(error.message);
    43. })
    44.  
    45. },
    46. methods: {
    47. // 添加tag
    48. addTag() {
    49. this.tags.push("标签" + this.tags.length);
    50. },
    51. onTagDelete(tag) {
    52. // 从数组中移除。
    53. this.tags.splice(this.tags.indexOf(tag), 1);
    54. }
    55. },
    56. data() {
    57. return {
    58. tags: undefined, // 初始化是没有 tag数据的,在页面打开后,通过网络请求获取标签。
    59. }
    60. }
    61. }
    62. </script>
    63.  
    64. <style scoped></style>

    运行程序,效果如下:

    图3

    最终可以看到,这样的方式来实现动态组件渲染,宗旨就是:数据有,组件有,数据无,组件无。这也是Vue框架十分 建议的实现方式。我本人也建议使用这样的方式来实现。

    二、先生成组件再添加到界面上

    此方法不用事先将组件引入到界面中。而是当数据获取到时,使用数据建立组件,然后将组件添加到界面上。 这种思路显然完全正确无误,不过在Vue项目里,这样虽说可以实现,但是门槛略高。但了解这种方法也会为今后的开发 带来不少的便利。

    1、了解 Vue 实例的创建

    要进行下一步的讲解,先必须要了解 Vue 实例的创建。在我们平时开发Vue但也项目是,通常都能在 main.js 里看到这样的代码:

     
    1. // main.js
    2. import Vue from 'vue'
    3. import App from './App.vue'
    4.  
    5. Vue.config.productionTip = false
    6.  
    7. new Vue({
    8. render: h => h(App),
    9. }).$mount('#app')

    这很容易理解,因为这样就算创建了我们单页面的整个根Vue实例了。那如果要创建我们自己想要的动态组件, 并且创建出来的组件要可以被加入到这个根实例里面去,又该怎么办?这个时候,就要祭出另一个强悍的方法了:

    Vue.extend

    这个方法允许我们自己随时创建 vue 实例,但是这个方法的学习门槛实在是高,先示列用法,下面是此方法的一个使用示列:

     
    1. // 创建组件逻辑
    2. let TagClass = Vue.extend({
    3.  
    4. // 向界面渲染的dom方法。
    5. render (createElement) {
    6. return createElement(
    7. 'div',
    8. {
    9. style: {
    10. display: 'inline-block',
    11. margin: '3px',
    12. backgroundColor: '#d9d9d9'
    13. }
    14. },
    15. [
    16. this.text,
    17. createElement(
    18. 'button',
    19. {
    20. on: {
    21. 'click': this.onCloseClick
    22. }
    23. },
    24. '×'
    25. )
    26. ]
    27. );
    28. },
    29. methods: {
    30. onCloseClick () {
    31. this.$el.remove();
    32. // 将删除标签事件暴露除去
    33. this.$emit("delete", this.text);
    34. }
    35. },
    36. data () {
    37. return {
    38. text: "文本内容", // 什么这个tag标签使用的文字是传入的标签文字内容
    39. }
    40. }
    41. });
    42.  
    43. // tag 就是想要的组件实例。
    44. let tag = new TagClass();

    对单文件组件有所心得的朋友肯定还是对这段代码能够摸清楚一些的,但是这个方法并不是所有人都能一目了然。 其中有:

    1. 没有了 template 模板。
    2. 新增了 render 方法。

    现在使用 vue-cli@3 创建的项目,都是只包含vue运行时功能的vue项目,所以,在代码里动态构建的组件,不能使用 template 了,那些组件模板页面其实在build的时候也会转换成render函数实现,所以在代码里动态构建组件只能使用 render 方法来进行页面的渲染。 而这个方法不难,难点可能就是render方法参数 createElement,这个参数它是一个可执行的方法,这个方法有3个参数:

     
    1. createElement(参数1, 参数2, 参数3);
    2.  
    3. // 参数1: 可以是别的组件,可以是原生dom组件。
    4. // 参数2: 一个对象,这个对象里的数据将作为 "参数1" 的属性信息写入到组件或dom上。
    5. // 参数3: 数组或字符串或createElement方法返回的内容, 这个部分的数据将作为 "参数1" 的子内容出现。

    createElement 参数2 详解

    这个方法能够完成任何dom的创建以及嵌套都没问题,难点就在于如何去灵活的使用它,首要一点就是了解参数的具体含义, 参数2 作为dom属性配置,承载着许多的必要功能,下面是截取自vue官网的对象配置详细介绍:

     
    1. // 参数2 配置对象介绍
    2. {
    3. // 与 `v-bind:class` 的 API 相同,
    4. // 接受一个字符串、对象或字符串和对象组成的数组
    5. 'class': {
    6. foo: true,
    7. bar: false
    8. },
    9. // 与 `v-bind:style` 的 API 相同,
    10. // 接受一个字符串、对象,或对象组成的数组
    11. style: {
    12. color: 'red',
    13. fontSize: '14px'
    14. },
    15. // 普通的 HTML 特性
    16. attrs: {
    17. id: 'foo'
    18. },
    19. // 组件 prop
    20. props: {
    21. myProp: 'bar'
    22. },
    23. // DOM 属性
    24. domProps: {
    25. innerHTML: 'baz'
    26. },
    27. // 事件监听器在 `on` 属性内,
    28. // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
    29. // 需要在处理函数中手动检查 keyCode。
    30. on: {
    31. click: this.clickHandler
    32. },
    33. // 仅用于组件,用于监听原生事件,而不是组件内部使用
    34. // `vm.$emit` 触发的事件。
    35. nativeOn: {
    36. click: this.nativeClickHandler
    37. },
    38. // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
    39. // 赋值,因为 Vue 已经自动为你进行了同步。
    40. directives: [
    41. {
    42. name: 'my-custom-directive',
    43. value: '2',
    44. expression: '1 + 1',
    45. arg: 'foo',
    46. modifiers: {
    47. bar: true
    48. }
    49. }
    50. ],
    51. // 作用域插槽的格式为
    52. // { name: props => VNode | Array<VNode> }
    53. scopedSlots: {
    54. default: props => createElement('span', props.text)
    55. },
    56. // 如果组件是其它组件的子组件,需为插槽指定名称
    57. slot: 'name-of-slot',
    58. // 其它特殊顶层属性
    59. key: 'myKey',
    60. ref: 'myRef',
    61. // 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
    62. // 那么 `$refs.myRef` 会变成一个数组。
    63. refInFor: true
    64. }

    现在,有了对 extend 方法的了解和 createElement 方法的加持,还有什么办不到的。 要了解更多 Vue.extend 方法的详情,请参考:Vue官方API。这里还有一篇描述使用构造函数时如何传递参数的记录《构造函数式组件如何传递参数》。 要了解更多 createElement 方法的详情,请参考:Vue官方文档

    2、编写代码,实现效果。

    现在可以修改 App.vue 文件,将其修改为先生成组件后显示到界面的逻辑,修改完成后代码如下:

     
    1. <template>
    2. <div>
    3. <h3>标签管理</h3>
    4.  
    5. <!-- 放置tag的容器,从网络获取的tags都要放在这个div里面 -->
    6. <div ref="tagsContext">
    7. <div v-if="!tags">标签加载中...</div>
    8. <div v-else-if="tags && tags.length === 0">没有标签</div>
    9. </div>
    10.  
    11. <button @click="addTag">添加标签</button>
    12. </div>
    13. </template>
    14.  
    15. <script>
    16. import Util from './Util';
    17.  
    18. export default {
    19. name: 'app',
    20. components: {},
    21. created() {
    22. // 从网络加载tag数据.
    23. Util.getTagsFromNet()
    24. .then(result => {
    25. if (result.code !== 200) {
    26. return Promise.reject(new Error(result.message));
    27. }
    28.  
    29. // 数据加载成功,将数据赋值给 tags 即可。
    30. this.tags = result.data;
    31.  
    32. // 拿到了数据,进行渲染:
    33. for (let i = 0; i < this.tags.length; i++) {
    34. this.initTagComponentAndShowTag(this.tags[i]);
    35. }
    36. })
    37. .catch(error => {
    38. window.alert(error.message);
    39. })
    40.  
    41. },
    42. methods: {
    43. // 添加tag
    44. addTag() {
    45. let tagText = "标签" + this.tags.length;
    46. this.tags.push(tagText);
    47. this.initTagComponentAndShowTag(tagText);
    48. },
    49. // 有tag被删除
    50. onTagDelete(tag) {
    51. // 从数组中移除。
    52. this.tags.splice(this.tags.indexOf(tag), 1);
    53. },
    54. // 初始化一个tag组件并且显示到界面上。
    55. initTagComponentAndShowTag (tagText) {
    56. let tag = Util.newTag(tagText);
    57.  
    58. // 添加删除监听
    59. tag.$on("delete", this.onTagDelete);
    60.  
    61. // 挂载组件,即创建虚拟dom。
    62. tag.$mount();
    63.  
    64. // 将组件添加到显示tag的div里面
    65. this.$refs.tagsContext.appendChild(tag.$el);
    66. }
    67. },
    68. data() {
    69. return {
    70. tags: undefined, // 初始化是没有 tag数据的,在页面打开后,通过网络请求获取标签。
    71. }
    72. }
    73. }
    74. </script>
    75.  
    76. <style scoped></style>

    再次运行程序,得到效果,与使用数据动态渲染完全一致:

    图4

    这次就不再是先使用 Tag 组件了,为了避嫌,我甚至连 Tag 组件都没有引入。可以看到,在网络数据获取完成时, 通过循环构造组件并添加到了界面上,在 initTagComponentAndShowTag 方法中,使用Util.newTag 方法完成了组件的动态创建。由于组件的创建方法属于比较低层次级别方法,所以与界面逻辑剥离开。整个 Util.js 的代码如下:

     
    1. import Vue from 'vue';
    2.  
    3. export default {
    4.  
    5. newTag (tagText) {
    6. // 创建组件逻辑
    7. let TagClass = Vue.extend({
    8.  
    9. // 向界面渲染的dom方法。
    10. render (createElement) {
    11. return createElement(
    12. 'div',
    13. {
    14. style: {
    15. display: 'inline-block',
    16. margin: '3px',
    17. backgroundColor: '#d9d9d9'
    18. }
    19. },
    20. [
    21. this.text,
    22. createElement(
    23. 'button',
    24. {
    25. on: {
    26. 'click': this.onCloseClick
    27. }
    28. },
    29. '×'
    30. )
    31. ]
    32. );
    33. },
    34. methods: {
    35. onCloseClick () {
    36. // 移除dom
    37. this.$el.remove();
    38. // 然后将删除标签事件暴露除去
    39. this.$emit("delete", this.text);
    40. }
    41. },
    42. data () {
    43. return {
    44. text: tagText, // 为这个tag标签使用的文字是传入的标签文字内容
    45. }
    46. }
    47. });
    48.  
    49. return new TagClass();
    50. },
    51.  
    52. // 模拟从网络获取tag数据。
    53. getTagsFromNet () {
    54. return new Promise((resolve) => {
    55. setTimeout(() => {
    56. let tags = [];
    57. for (let i = 0; i < 6; i++) {
    58. tags.push("标签" + i);
    59. }
    60. resolve({
    61. code: 200,
    62. data: tags,
    63. msg: 'success'
    64. });
    65. }, 2000);
    66. });
    67. }
    68. }

    代码中注释比较详细,应该能了解其中含义。不论时那种方案最终都能实现效果,但是显然第一种方案代码更加优雅, 第二种代码显得比较凌乱(也许是我写的比较凌乱)。从开发复杂度上来讲,第一种也是远胜第二种。不过了解了第二种 方法,收益也是非常的肥厚!

    三、归纳总结

    这两种方法建议使用第一种去实现组件的添加或移除,第二种方案作为知识点要掌握。其中难点在于对Vue实例的本质了解、 对Vue渲染方法的了解,以及对Vue实例的使用熟悉程度。其中本例最重要的就是结合使用 Vue.extend 和 createElement 方法。

    本文中涉及的项目资料你可以在百度网盘下载, 提取码:m3y1。注意本资料不包含第四小节(下一节)的内容。

    四、组件动态切换

    本小节为后来新增的内容,为更加完善本文标题所传达的知识点,本小节有必要新增。

    有时候我们在使用组件的过程中,会出现这样一种需求:在同一个位置根据不同的某个状态值显示不同的组件。比如说常见的订单状态标志,存在着:未支付、已支付、配送中、派件中等等状态时,我们就要根据订单数据里某一个状态来动态显示这个状态标志了。对于这种简单标志效果展示性的需求,我们可以直接使用v-if语句来实现,在同一个位置根据不同的状态显示不同的标志。

    1、使用 v-if

    对于简单组件,或者直接是一个dom元素,我们使用v-if是可以的,不仅提升可读性后期维护性也会大大提升,扩展空间也很大。就像是这样:

     
    1. <div>
    2. <span class='un-pay' v-if='orderStatus === 1'>未支付</span>
    3. <span class='pay-ed' v-else-if='orderStatus === 2'>已支付</span>
    4. <span class='dliving' v-else-if='orderStatus === 3'>配送中</span>
    5. <span class='taking' v-else-if='orderStatus === 4'>已支付</span>
    6. <span class='other' v-else-if='orderStatus === 5'>等等其他更多状态</span>
    7. </div>

    在从上述代码可以看到,在div下同一时间永远都只会显示一个标志。对于这种简单组件或dom,直接使用v-if会更加直观。但如果我们要根据某个标志来显示不同的复杂组件时,如果再写一堆v-if在这儿堆积起来,显得有点臃肿且难以理解了。

    为了更优雅的实现这样的需求,下面介绍另一种解决方案。

    2、内置组件 component

    component其实算不上是一个组件,但它有提供了一个强大的功能,就好像它是一个‘床’,这个‘床’上要放一个什么组件,可以你自己来确定,甚至还可以在这一个‘床’上随时来回切换各个不同的自定义组件。

    那么有这样一个好东西,必须要用起来。下面来看一个典型的场景:

    动态切换

    这个示列展示了在同一个component‘床’提供的位置里动态的根据状态显示了不同的自定义组件。下面来看代码:

     
    1. <template>
    2. <!-- 用这个按钮来演示触发状态变化 -->
    3. <button v-on:click="onChangeClick">点击切换状态({{someStatus}})</button>
    4. <hr>
    5. <!-- 使用内置 component 组件,在这里面将显示我们希望的自己的组件 -->
    6. <component v-bind:is="currentComponent"></component>
    7. </template>
    8. <script>
    9. import mybutton from './mybutton';
    10. import myfile from './myfile';
    11. import myimg from './myimg';
    12.  
    13. export default {
    14.  
    15. // 这三个组件都要在本界面展示,所以都注册进来。
    16. components: {
    17. mybutton: mybutton,
    18. myfile: myfile,
    19. myimg: myimg
    20. },
    21. data() {
    22. return {
    23. // 定义当前展示的是哪一个组件,默认就展示 mybutton 好了
    24. currentComponent: 'mybutton',
    25. // 定义状态变量
    26. someStatus: 1, // 假设某状态
    27. // 1、显示mybutton组件
    28. // 2、显示myfile组件
    29. // 3、显示myimg组件
    30. }
    31. },
    32. methods: {
    33. // 点击切换状态按钮
    34. onChangeClick: function () {
    35. // 逻辑很简单,就是从1到3来回变化
    36. if (this.someStatus === 3) {
    37. this.someStatus = 1;
    38. } else {
    39. this.someStatus++;
    40. }
    41. }
    42. },
    43. watch: {
    44. // 监听状态变化
    45. someStatus(newvalue) {
    46. // 逻辑也很简单,根据不同的状态为 currentComponent 赋不同的值就可以了
    47. if (newvalue === 1) {
    48. this.currentComponent = 'mybutton';
    49. } else if (newvalue === 2) {
    50. this.currentComponent = 'myfile';
    51. } else if (newvalue === 3) {
    52. this.currentComponent = 'myimg';
    53. }
    54. }
    55. }
    56. }
    57. </script>

    上述代码中可以看到,使用component内置组件,他可以根据你传递的 is变量来确定具体使用哪一个组件,我们这里演示使用的组件都不需要参数,而如果你的自定义组件又需要一些参数的时候,如何将这些参数通过component传递给自己的组件呢,其实很简单:

     
    1. <component v-bind:is='xxx' name='Jack' :age='age'></component>

    简单的将参数写在component上就可以了,你在你自己的组件里怎么定义的,在这里也整么使用,上述代码写了2个参数,一个固定值 Jack, 和另一个变量值 age。如果你各个自定义组件又不同的参数又该怎么办?不用担心,你都可以全写在这个component上面的。

    注意事项:每当切换 is 的值时,都会创建新的对应组件,在上列中来说,就是每次状态切换,为 currentComponent 赋新值时,component 里面显示的我们自己的组件每次都会新建一个,意味着如果你的自定义组件里有维护着状态逻辑的话,那么可能会因为这样的切换而丢失。而如何让它们切换的时候不新建,而是复用之前已经创建好的呢?只需要在 component 外面包裹一层 <keep-alive></keep-alive> 就可以啦。

    转自https://www.microanswer.cn/blog/9 

    展开全文
  • vue项目中 经常会有用户权限的问题,根据不同的用户角色进行不同的组件的显示,就是在需要哪一个组件的时候显示出来。vue中可以使用 <component :is="组件名" /> 来实现。 <template> <div ...

    在vue项目中 经常会有用户权限的问题,根据不同的用户角色进行不同的组件的显示,就是在需要哪一个组件的时候显示出来。vue中可以使用

        <component :is="组件名" />
    

    来实现。

    <template>
      <div class="dashboard-container">
        <component :is="currentRole" />
      </div>
    </template>
    
    <script>
    import { mapGetters } from "vuex";
    import adminDashboard from "./admin";
    import editorDashboard from "./editor";
    
    export default {
      name: "Dashboard",
      components: { adminDashboard, editorDashboard },
      data() {
        return {
          currentRole: "adminDashboard",
        };
      },
      computed: {
        ...mapGetters(["roles"]),
      },
      created() {
        if (this.roles.length < 1) {
          this.currentRole = "editorDashboard";
        }
      },
    };
    </script>
    
    展开全文
  • Vue动态组件渲染

    2021-03-16 16:50:02
    动态切换的子组件一 <template> <div> 我是多行文本框{{ config.name }} <div> <input type="text" /> </div> </div> </template> <script> export default ...

    子组件封装

    动态切换的子组件一

    <template>
      <div>
        我是多行文本框{{ config.name }}
        <div>
          <input type="text" />
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'rx-textarea-config',
      props: {
        config: Object
      },
      // keep-alive组件激活时调用(组件激活后需要它做什么)
      activated () {
        console.log('我是多行文本框的组件激活')
      },
      // keep-alive组件停用时调用(同理,组件停用后需要它做什么)
      deactivated () {
        console.log('我是多行文本框的组件销毁')
      }
    }
    </script>
    <style>
    </style>
    
    

    动态切换的子组件二

    <template>
      <div>我是单行文本框{{ config.type }}</div>
    </template>
    <script>
    export default {
      name: 'rx-textbox-config',
      props: {
        config: Object
      },
      // keep-alive组件激活时调用(组件激活后需要它做什么)
      activated () {
        console.log('我是单行文本框的组件激活')
      },
      // keep-alive组件停用时调用(同理,组件停用后需要它做什么)
      deactivated () {
        console.log('我是单行文本框的组件销毁')
      }
    }
    </script>
    <style>
    </style>
    
    

    父组件调用

    <template>
       <div>
           <button @click="btn">按钮切换</button>
           <component :is="currentConfig" :config="config"></component>
      </div>
    </template>
    <script>
    //引入子组件
    import RxTextboxConfig from './components/rxTextbox'
    import RxTextareaConfig from './components/rxTextarea'
    export default {
      name: 'App',
      components:  {
        RxTextboxConfig,
        RxTextareaConfig,
        }
      props: {
        config: Object
       },
      data(){
      	  currentConfig: 'rx-textarea-config',
          config: {},
      } 
      methods: {
        btn () {
          // 按钮切换
          if (this.currentConfig === 'rx-textarea-config') {
            this.currentConfig = 'rx-textbox-config'
            this.config.type = 'VARCHAR'
          } else {
            this.currentConfig = 'rx-textarea-config'
            this.config.name = '我是富文本框'
          }
      }
    }
    </script>
    <style>
    </style>
    
    
    展开全文
  • Vue动态创建组件并插入到页面中

    千次阅读 2021-02-01 22:14:13
    案例中用户通过点击新增按钮,新加下一个页签,要实现这个需求只能通过动态的创建组件,然后添加到页面中,下面来实现这个需求(页签内容部分就不做了,重点放在动态创建页签按钮) 案例实现 <div id="app" class
  • 在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示://...
  • 需要了解基本的vue渲染流程2、本文知识点涉及vue构造器以及选项策略合并、 渲染逻辑问题描述:Child继承自App,主程序通过true 和false来控制显示Child 还是App,在动态 中渲染出来的始终是App,代码如下Vue.config....
  • 一般我们在写vue组件的时候,都是写一个单文件,后通过import的方式将组件引入到当前页面中import Component from './components/component'export default {...components: {Component}...}而在element-ui中,像...
  • 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....
  • vue动态更改组件属性

    2021-06-06 12:48:25
    vue动态更改组件属性 <div> <v-text-field v-for="item in items" :key="item.label" :label="item.label" ></v-text-field> </div> :label=“item.label”
  • 穿缩框 异步组件 Vue.component('qf-button',function(resolve,reject){ setTimeout(()=>{ resolve({ ...Vue动态组件 动态组件 也是内置组件 使用包裹的组件,不会死掉,也就是不会进入销毁阶段 这
  • vue3动态创建组件

    千次阅读 2020-12-23 15:11:09
    <template> <div class="b"> <cmp :...</cmp>...import Vue from 'vue/dist/vue.common.js'//注意引用方式 export default { components: { cmp: { .
  • 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下:这种效果实现其实就是对 v-for 指令的一种使用,组件不是必须的,只是为了将这部门的代码我们...
  • 将项目静态路由替换成动态路由,通过后台数据拿到路由配置信息动态加载 问题描述: 小编将路由信息与系统菜单信息存在一起,当登录后拿到菜单信息后同时处理路由数据,过程肯定不是那么一帆风顺的,下面是导致失败...
  • VUE3.0 动态添加异步组件的问题@TOC VUE3.0 动态添加异步组件的问题 先贴上思路来源 https://www.cnblogs.com/hanshuai/p/11196151.html https://www.vue3js.cn/docs/zh/guide/component-dynamic-async.html#异步...
  • Vue组件定制——动态查询规则生成组件

    千次阅读 多人点赞 2021-05-25 10:14:43
    1. 动态查询规则 动态查询规则,大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件,大致可以实现SQL查询的where条件,下面是摘自mongodb的某一软件。 2.组件构建思路 按照规则组件的组织形式...
  • 基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的、特定的组件内容,而不需要大量的 import 组件并进行 component 注册Index.vueimport loader from './EntryLoader.vue'export default {components: {...
  • vue页面动态添加元素

    千次阅读 2020-12-19 21:52:40
    vue页面动态添加元素发布时间:2018-09-20 11:54,浏览次数:3572, ...参考:https://jintang.github.io/2018/03/27/vue动态添加组件/<>2.页面直接添加元素页面结构代码: {{index +1}}. @click="delete(ind...
  • vue动态组件的使用

    2021-03-09 09:06:26
    动态组件的使用在vue.js文档中也有介绍,但是不是特别的详细,但是新手的话还是建议先看看,点击查看。 2、项目效果 点击登录方式,如:使用账户/手机/二维码登录,然后点击来回切换登录的页面。 3、目录结构 在根...
  • 我就废话不多说了,大家看代码吧~{{msg}}{{msg}}{{msg}}//局部定义三个组件const Home = {template:"#home",data(){return{msg:"这里是home组件"}}}const Fenlei = {template:"#fenlei",data(){return{msg:"这里是...
  • 然而,在官方资料中,并没有涉及到真正的“动态异步”组件,经过大量的时间研究和技术分析,我们给出目前比较合理的技术实现方式,并分析一下vue动态异步组件的实现思路。动态/异步组件的问题官网中介绍,动态组件是...
  • 普通动态添加背景图 <div class="serviceDate" :style="{ 'background-image': `url(${require('../../assets/weekComment/bannerCard_' + serviceInfo.code + '.png')})`, }" > </div> 注意:...
  • Vue 动态添加表格详细讲解!

    千次阅读 2021-01-28 17:35:14
    2、框架Vue 3、ui框架 ant design for Vue 版本:1.7.2 4、最重要的是 数据结构分析 4、数据结构 form: { modalEndpointId: '', shareParams: [ { modelMetrics: '', modalCheck: '', modalCheckValue: '', ...
  • active 写css样式 data 中activeIndex =0 组件添加:class=’[activeIndex ==index : ‘active’? ‘’]’
  • 当你只想重新渲染某个组件,或者销毁当前DOM并重新开始, 这个时候Vue的响应系统就差点儿意思。那如果是你遇到类似情况的话,会怎么办呢?最行之有效的办法就是给component设置一个:key,当你需要重新渲染这个组件的...
  • 动态添加dom元素,并绑定vue事件

    千次阅读 2020-12-19 21:51:45
    背景:后管系统配置一个产品后,前端(vue.js框架)取到这些产品信息并展示出来,产品经理要求在文本内容中添加链接。例如:本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区,最新信息以登陆...
  • vue 动态添加/删除dom元素

    千次阅读 2021-03-12 11:27:30
    需要在点击添加时,增加一行key/value的输入框;点击垃圾桶图标时,删除对应行
  • <Card v-for="(item,index) in list1" :key="item.ID" :style="activeIndex === index?'background:#3385ff':'background:#f2f2f2'" > </card> :style=“activeIndex === index?‘background:#3385ff...
  • 创建两个组件分别是父组件:aaa.vue组件:bbb.vue组件操作(aaa.vue) 在子组件添加ref=“child”命名。 给按钮添加一个方法, 方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 111,462
精华内容 44,584
关键字:

vue动态添加组件

vue 订阅