new vue 动态创建子组件,插入DOM,销毁等操作

创建
前提:父级组件中,动态创建子组件,页面只做size响应,其他数据不响应

emptyChart:组件
props:传参
on:事件监听
  const initEmptyChart = new Vue({
        render(h) {
          return h(emptyChart, {
            props: {
              itemId: rowId + '-' + 'col' + colId,
              rowId: rowId,
            },
            on: {
              remove: (rowId, itemId) => {
                that.remove(rowId, itemId)
              },
              removeRow: rowId => {
                that.removeRow(rowId)
              }
            }
          })
        }
      })
      const initChartInstance = initEmptyChart.$mount()
      this.$refs[rowId + '-' + 'col' + colId] = initChartInstance.$children
      // 手动将子组件实例添加进父组件实例中

插入DOM

documen.body.appendChild(initChartInstance.$el)

在父级中手动显式销毁实例

remove(itemref){
  this.$refs[itemref][0].$destroy()
}
  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 在Vue中,可以通过使用保留的`<component>`元素来动态地创建组件。通过将组件名绑定到`is`特性,可以让多个组件使用同一个挂载点。通过修改`is`指令的值,可以改变挂载的组件。例如,如果想要动态创建组件comp1和comp2,可以在父组件的模板中使用`<component>`元素,并将`is`特性绑定到一个变量,然后根据需要修改这个变量的值来切换不同的组件组件comp1的代码可以是: ```html <template> <div class="comp1"> 动态组件组件1 </div> </template> <script> export default { name: "comp1", } </script> ``` 组件comp2的代码可以是: ```html <template> <div class="comp2"> 动态组件组件2 </div> </template> <script> export default { name: "comp2", } </script> ``` 然后在父组件中,可以使用`<component>`元素来动态创建组件。例如,可以在父组件的模板中使用以下代码来动态创建组件: ```html <template> <div> <component :is="componentName"></component> </div> </template> <script> import comp1 from './comp1.vue' import comp2 from './comp2.vue' export default { data() { return { componentName: 'comp1', // 默认显示comp1组件 } }, components: { comp1, comp2, }, } </script> ``` 通过修改`componentName`的值,可以切换不同的组件。例如,可以在父组件的方法中使用以下代码来切换组件: ```javascript methods: { changeComponent() { this.componentName = 'comp2'; // 切换到comp2组件 }, } ``` 这样就可以实现动态创建组件的功能。 #### 引用[.reference_title] - *1* *2* *3* [vue 创建动态组件](https://blog.csdn.net/MeetLunay/article/details/122054192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值