vue.js 中 component 组件怎么用? 下面本篇文章给大家介绍一下 vue component 组件的使用方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
什么是组件
按照惯例, 引用 Vue 官网的一句话:
组件 (Component) 是 Vue.JS 最强大的功能之一. 组件可以扩展 html 元素, 封装可重用的代码. 在较高层面上, 组件是自定义元素, Vue.JS 的编译器为它添加特殊功能. 在有些情况下, 组件也可以是原生 HTML 元素的形式, 以 is 特性扩展.
组件 component 的注册
全局组件:
- Vue.component('todo-item',{
- props:['grocery'],
- template:'<li>{{grocery.text}}</li>'
- })
- var app7 = new Vue({
- el:"#app7",
- data:{
- groceryList:[
- {"id":0,"text":"蔬菜"},
- {"id":1,"text":"奶酪"},
- {"id":2,"text":"其他"}
- ]
- }
- })
- <div id="app7">
- <ol>
- <todo-item
- v-for="grocery in groceryList"
- v-bind:grocery="grocery"
- v-bind:key="grocery.id">
- </todo-item>
- </ol>
- </div>
局部注册:
- var Child = {
- template: '<div>A custom component!</div>'
- }
- new Vue({
- // ...
- components: {
- // <my-component> 将只在父模板可用
- 'my-component': Child
- }
- })
DOM 模板解析说明
组件在某些 HTML 标签下会受到一些限制.
比如一下代码, 在 table 标签下, 组件是无效的.
- <table>
- <my-row>...</my-row>
- </table>
解决方法是, 通过 is 属性使用组件
- <table>
- <tr is="my-row"></tr>
- </table>
应当注意, 如果您使用来自以下来源之一的字符串模板, 将不会受限
<script type="text/x-template">
JavaScript 内联模版字符串
.vue 组件
data 使用函数, 避免多组件互相影响
- HTML
- <div id="example-2">
- <simple-counter></simple-counter>
- <simple-counter></simple-counter>
- <simple-counter></simple-counter>
- </div>
- JS
- var data = { counter: 0 }
- Vue.component('simple-counter', {
- template: '<button v-on:click="counter += 1">{{ counter }}</button>',
- data: function () {
- return data
- }
- })
- new Vue({
- el: '#example-2'
- })
如上, div 下有三个组件, 每个组件共享一个 counter. 当任意一个组件被点击, 所有组件的 counter 都会加一.
解决办法如下
- JS
- Vue.component('simple-counter', {
- template: '<button v-on:click="counter += 1">{{ counter }}</button>',
- data: function () {
- return {counter:0}
- }
- })
- new Vue({
- el: '#example-2'
- })
这样每个组件生成后, 都会有自己独享的 counter.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17130.html