刘一抗二二

我们应该严格遵守一个组件只有一个根元素吗？

我们应该严格遵守一个组件只有一个根元素吗？ 相比于一个组件有多个根元素它有什么好的地方和不不好的地方？

一只臭美的Doggg

Vue 组件开发中 $createElement API 与右键菜单的动态渲染优化？

在开发的时候发现公司封装的树组件的右键菜单是预先在页面中放置一个DOM，通过修改绝对定位top,left的方式来将菜单定位到鼠标点击的位置，但是又引发了一些样式和布局的问题。所以想用Vue的$createElementAPI去优化一下。同时也希望能更深入了解Vue的VNode实现原理。目前的设计思路是声明一个局部组件，在点击菜单项时通过$emit传递状态， 最后统一在父组件中处理点击事件。 代码如下 Title let contextMenu = Vue.component('contextMenu', { props: ['testRender'], render: function (h) { return h('div', { class: 'contextMenuBox' }, [h('ul', this.testRender.map(item => h('li', { on: { click: (...args) => { this.$emit('click-li', args) } } }, item)))]); } }); const vm = new Vue({ data: { testRender: ['Item 1', 'Item 2', 'Item 3'], }, components: { 'context-menu': contextMenu }, methods: { collectClick(e) { console.log(e) } } }).$mount('#app'); 目前遇到的问题是：这种实现方式与在页面中预先放置一个DOM的实现方式是一致的，只是代码的复用性会稍强一些（也可能更优雅）包括在createElementAPI中传递的参数，只能是固定的某些内容，那能否在一个场景下，譬如问题中的右键菜单，也许会加入权限来控制可选项的数量。这些更抽象的设计思路，有没有更优雅的设计思路呢？希望路过的大佬不吝赐教。谢谢各位大佬。

努力的大名

有没有比较熟悉Vue3的, 麻烦帮忙看下这个需求怎么实现?

我把问题简化了一下. 设计一个 vue 组件, 模板如下: const childRef = ref(); 要求很简单: 无论外部向该组件的默认插槽中提供什么内容, "childRef.value" 始终指向插槽内的渲染的第一个元素实例或者为 null. 要求所有逻辑都实现在该组件内部 同样的问题我咨询过 ChatGPT4, 给出的方案是用 MutationOberserver 实现. 感觉确实能做, 但略牵强... 不知道有没有更优雅一点的解决方案?