精华内容
下载资源
问答
  • 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组件动态添加和删除属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 需要我们先设置共同的参数,然后根据条件动态添加参数属性。 二、案例 let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是...
  • 我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> [removed][removed] ... [removed][removed]
  • 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板。但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局。 例如要做一个类 select 的...
  • 今天小编就为大家分享一篇vue 点击按钮实现动态挂载子组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • // 递归组件 recursive.vue 递归组件 <Recursion count=count v-if=count></Recursion> [removed] export default { name: Recursion,//必须设置name属性 props: { count: { type: Number, default: 1
  • 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组件动态添加和删除属性

    千次阅读 2019-10-02 16:23:59
    1.vue组件动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName', val) 转载于:https://www.cnblogs.com/codebook/p/11414637.html...

    1.vue组件上动态添加和删除属性

    // 添加
    this.$set(this.obj, 'propName', val)
    
    // 删除
    this.$delete(this.obj, 'propName', val)

    转载于:https://www.cnblogs.com/codebook/p/11414637.html

    展开全文
  • VUE 怎么给对象动态添加属性

    千次阅读 2020-10-19 15:11:59
    代码 <button @click="addObjB"></button> data:{ data:{ a:'' } } methods:{ addObjB(){ this.$set(this.data,'b...追加属性的两种方式 ... //添加一个属性 this.obj=Object.assign({},this.data,{a:1

    代码

    <button @click="addObjB"></button>
    data:{
        data:{
            a:''
        }
    }
    
    methods:{
        addObjB(){
            this.$set(this.data,'b',111)
        }
    }
    

    追加属性的两种方式

    this.$set(this.data, key , value); //添加一个属性
    
    this.obj=Object.assign({},this.data,{a:1,b:2}); //添加多个属性,必须要创建一个新的对象,让它包含原对象的属性和新的属性
    
    展开全文
  • 一、动态给子组件设置ref属性 piePre是data中定义的数组 二、通过this.$refs调用
  • Vue中如何动态添加组件

    千次阅读 2020-12-20 04:23:52
    一般我们在写vue组件的时候,都是写一个单文件,后通过import的方式将组件引入到当前页面中import Component from './components/component'export default {...components: {Component}...}而在element-ui中,像...
  • Vue实现动态组件的切换

    千次阅读 2021-11-09 21:46:18
    在这里跟大家分享一下如何实现动态组件的切换,举个例子,就比如组件库中的Steps...-- 通过is属性动态切换组件 --> <div class="steps-content"> <compoment :is="pro[current]"></compoment>
  • 在父组件中存在一个对象obj,想把obj中所有属性都作为子组件的attribute添加到子组件中。 例 父组件: <template> <input> </template> <script> export default { data(){ return { ...
  • 动态添加属性 用this.$set(obj,key,value),可以个对象添加动态属性,obj为对象,key为属性,value属性值 判断对象是否包含某个属性 obj.hasOwnProperty(key),判断obj是否包含key这个属性 获取属性值 obj[key],获取...
  • vue动态组件使用及传值

    万次阅读 2020-10-16 10:22:23
    component 组件:在页面中通过使用component元素,在根据组件中的is属性动态的切换不同的组件。 demo: <template> //index.vue <div class="contain-wrap"> <input type="button" @click=...
  • vue 通过按钮点击动态添加组件

    千次阅读 2019-08-15 15:52:11
    本文链接:... 效果如下 思路 v-for循环+数组组件 第一步、定义一个组件,这个组件里面是一个html代码 ... Vue.component('dom', { template: '<div>我是一个组件</div&...
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • 需求背景:最近在做的项目中需要完成一个动态表单的需求,可以根据用户需求,动态拖拽添加表单字段,并且配置表单项属性,之前的一个版本是前后预定好一些多个了几个字段,表单设计的一个表单项就对应一个数据库中的...
  • Vue组件动态添加和删除属性

    万次阅读 2017-03-22 21:24:36
    组件添加动态属性 this.$set(this.data,"obj",value');大概是这样
  • Vue动态创建组件并插入到页面中

    千次阅读 2021-02-01 22:14:13
    案例中用户通过点击新增按钮,新加下一个页签,要实现这个需求只能通过动态的创建组件,然后添加到页面中,下面来实现这个需求(页签内容部分就不做了,重点放在动态创建页签按钮) 案例实现 <div id="app" class
  • vue-动态组件(:is=“组件名“)

    千次阅读 2020-11-27 17:37:29
    元素,动态地绑定到它的is特性,我们让多个组件可以使用同一个挂载点,并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件 也是是一个组件对象,如果匹配不到则不显示。 改变挂载的组件,只需要修改is...
  • vue动态添加表单Define form fields once, as schema, and render them anywhere! 一次将表单字段定义为架构,然后将其呈现在任何地方! How much code does it take for you to render all forms in your ...
  • Vue使用this.$set动态添加属性

    千次阅读 2022-04-07 16:03:07
    如果不是使用this.$set动态添加属性值,这个属性值是可以添加上,但是不会作为响应式数据,也就是不会重新解析模板。
  • vue动态修改组件的子组件

    千次阅读 2020-02-29 11:45:25
    固定组件组件的子组件列表是固定的,注册父组件的组成部分: //这里导入子组件 import ChildSlot from './ChildSlot' export default{ name:"TestSlot", //这里注册子组件 components:{ ChildSlot } } ...
  • 一、动态地给子组件设置ref属性 二、通过this.$refs获取对应的dom元素 注意:博主这里使用的是$this,是由于前文已经const $this = this。
  • Vue组件定制——动态查询规则生成组件

    千次阅读 多人点赞 2021-05-25 10:14:43
    1. 动态查询规则 动态查询规则,大致如下图所示...2.1 组件属性 data: 是树结构的内容,我们定义为: { condition: 'AND', rules: [], } fieldList: 字段列表数组,可供选择的字段集合; operatorList: 操作列表数
  • vue动态添加和删除组件缓存 keep-alive

    千次阅读 热门讨论 2019-10-30 16:09:07
    Vue的抽象组件,自身不会渲染一个DOM元素,也不会出现在父组件链中,能将组件在切换过程中将状态保存在内存中,防止重复渲染DOM;包裹动态组建时,会缓存不活动的组件实例,而不是销毁它们;当组件在 内被切换时,它...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,141
精华内容 28,456
关键字:

vue动态添加组件属性

友情链接: 12434324.rar