vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失

最新推荐文章于 2024-05-21 10:17:20 发布

qq_41737172

最新推荐文章于 2024-05-21 10:17:20 发布

阅读量1.2k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_41737172/article/details/122358511

版权

组件自己不能删除自己，$destroy只能把组件实例从组件树上删除，但视图中还是有。
正确的做法是在父组件中，通过v-if删除子组件
jsx就是不加载不加载子组件
下面是一个简单的实例，注意vue.js路径

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    
</style>
</head>
<body>
<div id='app'>
    <template id='temp'>
        <div >
            <list></list>
        </div>
    </template>
</div>

<script src="../../vue.js"></script>
<script>
const arr= [
  {id:'0', ctt: 'aaa'},
  {id:'1', ctt: 'bbb'},
    {id:'2', ctt: 'ccc'},
]
const item={
    name:'item',
    props:{ctt: String, id:String},
    render(h) {
      const btn= h('button', '删除')
      return h('div', {
          attrs: {id: this.id}
        }, [
          this.ctt,
            btn
        ])
    }
}

function handle_click(e) {
  const id= e.target.getAttribute('id')
    this.arr.splice(+id, 1)
}
function render(h) {
  const content= this.arr.map(d=> {
      return h(item, {
          props: {ctt: d.ctt, id: d.id}
        })
    })
    return h('div', {
      on: {click: this.handle_click}
    }, content)
}
function data() {
  return {
      arr: arr
    }
}
const list= {
  name: 'list',
    data,
    render,
    methods: {handle_click}
}
const vm=new Vue({
  el:"#app",
    template:'#temp',
    components:{list}
})
</script>

</body>
</html>

qq_41737172

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失

组件自己不能删除自己，$destroy只能把组件实例从组件树上删除，但视图中还是有。正确的做法是在父组件中，通过v-if删除子组件jsx就是不加载不加载子组件下面是一个简单的实例，注意vue.js路径<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css"> </style&g
复制链接

扫一扫