作者：Echoyya
出处：https://ponent('todo-item', { template: ` <li> {{title}} <button @click="$emit('remove')">remove</button> </li> `, props: ['title'] }) new Vue({ el: "#app", data: { todos: ["eating", "swimming", "reading"] }, methods: { removeTodo: function (index) { this.todos.splice(index, 1) } } })

补充说明一下is属性：

有些 HTML 元素，诸如 ul、ol、table 和 select，对于可以出现在其内部元素是有严格限制的。而有些元素，诸如 li、tr 和 option，只能出现在特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：

以上就是html中创建并调用vue组件的几种方法汇总的详细内容，更多关于html 创建调用vue组件的资料请关注其它相关文章！