我想呈现一个自定义组件,它在表中显示一行.

我有以下代码:

// js file
Vue.component('message-row', {
    data: function () {
        return {
            msg: 'Hello'
        }
    },
    template: '<tr><td>{{ msg }}</td></tr>'
});

new Vue({
  el: '#app'
});


// html file
<div id="app">
    <table><message-row></message-row></table>
</div>

问题是,行最终呈现在表外!这样地:

<div id="app">
    <tr><td>Hello</td></tr>
    <table></table>
</div>

你可以在这个JSFIDLE https://jsfiddle.net/eciii/7v6yrf3x/中查看它

我不确定这是一个错误还是我只是错过了一些非常明显的东西...

推荐答案

见Vue.js的文档大约有DOM Template Parsing Caveats个:

有些HTML元素,比如<ul><ol><table><select>,对哪些元素可以出现在它们内部有限制,而有些元素,比如<li><tr><option>,只能出现在某些其他元素内部.

这将导致在使用具有此类限制的元素的组件时出现问题.例如:

<table>
  <blog-post-row></blog-post-row>
</table>

定制组件<blog-post-row>将被视为无效吊出

<table>
  <tr is="blog-post-row"></tr>
</table>

您需要使用is属性添加组件,如下所示.

<table><tr is="message-row"></tr></table>

https://jsfiddle.net/7v6yrf3x/1/.

Vue.js相关问答推荐

如何以惯用的方式触发 vue3 中同级组件的效果?

传单 vue3 组件变体打开错误的标记 - 单击时弹出

在 Vue.js 2.6 的 Javascript 中访问 的内容

Vuex Mutations 和 Airbnb eslint

如何使用带有自定义标签和类的`transition-group`

作用域slots和 IE11 的问题

Vue.js 如何计算总数?

一个 div 组件中的 Vue.js 2.0 路由链接

如何在 vuejs 中异步加载图像 src url?

Vuex - 如何跨不同选项卡持久存储更新?

W3C 验证和 Vue 的 HTML 绑定语法

POST 文件连同表单数据 Vue + axios

在 Vue.js 中,为什么我们必须在导入组件后导出它们?

如何在 Vue 中动态创建组件上获取更新的 $refs?

Vue在按钮单击时添加一个组件

Vuetify - 如何进行分页?

错误:找不到模块'@vue/babel-preset-app'

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止

升级到 vue-cli 3 后,HTML 中的空格消失了

将鼠标悬停在 TailwindCSS 中的 div 上时显示按钮