Vue.js实战学习-组件详解(一)

109 阅读 0 评论 72 点赞

我是靠谱客的博主勤奋摩托，最近开发中收集的这篇文章主要介绍Vue.js实战学习-组件详解(一)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

组件与复用

1.组件用法

组件与创建Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。全局注册实例代码如下：

Vue.component('my-component', {
//选项
})

my-component就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名。

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-component>的形式来使用组件了，实例代码如下：

<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
//选项
});
var app = new Vue ({
el: '#app'
})
</script>

此时打开页面还是空白的，因为我们注册的组件没有任何内容，在组件选项中添加template就可以显示组件内容了，示例代码如下：

Vue.component('my-component', {
template: '<div>这里是组件的内容</div>'
});

渲染后的结果是：

<div id="app">
<div>这里是组件的内容</div>
</div>

template的DOM结构必须被一个元素包含，如果直接写成"这里是组件的内容"，不带"<div></div>" 是无法渲染的。

在Vue实例中，使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。组件中也可以使用components选项来注册组件，使组件可以嵌套。示例代码如下：

<div id="app">
<my-component></my-component>
</div>
<script>
var Child = {
template: '<div>局部注册组件的内容</div>'
}
var app = new Vue ({
el: '#app',
components: {
'my-component': Child
}
})
</script>

Vue组件的模板在某些情况下受到HTML的限制，比如<table>内规定只允许是<tr>、<td>、<th>等这些表格元素，所以在<table>内直接使用组件是无效的。这种情况下。可以使用特殊的is属性来挂载组件，示例代码如下：

<div id="app">
<table>
<tbody is="my-component"></tbody>
</table>
</div>
<script>
Vue.compontent('my-component', {
template: '<div>这里是组件的内容</div>'
});
var app = new Vue ({
el: '#app'
})
</script>

tbody在渲染时，会被替换为组件的内容。常见的限制元素还有<ul>、<ol>、<select>。

除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、computed、methods等。但是在使用data时，和实例稍有区别，data必须是函数，然后将数据return出去，例如：

<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>{{ message }}</div>',
data: function () {
return {
message: '组件内容'
}
}
});
var app = new Vue({
el: '#app'
})
</script>