通过 ref 移除 子盒子

在Vue.js中，当你想要通过`ref`属性移除子组件或子元素时，你需要先获取到对应的引用（即`ref`所绑定的`Vue`实例或DOM元素），然后调用其`$el`（元素节点）或相关方法来实现。下面是一个简单的例子：

<!-- 父组件模板 -->
<div id="parent">
  <child-component :key="index" ref="childRef" v-for="(item, index) in items">
    <div :ref="`childElement_${index}`">{{ item.content }}</div>
  </child-component>
</div>

<script>
export default {
  data() {
    return { items: [] };
  },
  methods: {
    removeChild(index) {
      this.$refs.childRef.$children[index].$el.remove(); // 移除子组件内的div
      // 或者，如果你只想移除特定的子元素，可以用这种方式：
      // this.$refs[`childElement_${index}`].remove();
    }
  }
};
</script>

在这个例子中，我们在每个循环迭代中创建了一个子`div`，并给它分配了唯一的`ref`名称。当需要移除某个`div`时，我们可以通过索引来访问对应的`Vue`实例，调用它的`$el.remove()`方法来移除对应元素。