vue component组件使用方法详解

vue component组件使用方法详解

什么是组件

按照惯例，引用vue官网的一句话：

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件component的注册

全局组件:

Vue.component('todo-item',{

props:['grocery'],

template:'

})

var app7 = new Vue({

el:"#app7",

data:{

groceryList:[

{"id":0,"text":"蔬菜"},

{"id":1,"text":"奶酪"},

{"id":2,"text":"其他"}

]

}

})

v-for="grocery in groceryList"

v-bind:grocery="grocery"

v-bind:key="grocery.id">

v-for="grocery in groceryList"

v-bind:grocery="grocery"

v-bind:key="grocery.id">

局部注册：

var Child = {

template: '

}

new Vue({

// ...

components: {

// 将只在父模板可用

'my-cohttp://mponent': Child

}

})

DOM模板解析说明

组件在某些HTML标签下会受到一些限制。

比如一下代码，在table标签下，组件是无效的。

...

解决方法是，通过is属性使用组件

应当注意，如果您使用来自以下来源之一的字符串模板，将不会受限

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。