您的位置：首页 > 产品设计 > UI/UE

vue组件（一）——组件介绍

2017-12-22 16:50 387 查看

定义

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 
is
 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。


全局组件

我们知道，可以通过以下方式创建一个Vue实例：
new Vue({
el: '#some-element',
// 选项
})

要注册一个全局组件，可以使用 
Vue.component(tagName, options)
。例：

Vue.component('my-component', {
// 选项
})
组件在注册之后，便可以作为自定义元素 
<my-component></my-component>
 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：
<div id="example">
<my-component></my-component>
</div>

案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 全局组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-----引用组件----->
<my-component></my-component>
</div>

<script>
// 注册
Vue.component('my-component', {
template: '<h3>我是全局组件！</h3>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>
渲染为：
<div id="example">
<div><h3>我是全局组件！</h3></div>
</div>





局部组件

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 
components
注册仅在其作用域中可用的组件：
var Child = {
template: '<h3>我是局部组件！</h3>'
}new Vue({ // ... components: { // <my-component> 将只在父组件模板中可用 'my-component': Child }})


案例2












<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 局部组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-----引用组件----->
<my-component></my-component>
</div>

<script>
var Child = {
template: '<h3>自定义组件!</h3>'
}

// 创建根实例
new Vue({
el: '#app',
components: {
// <my-component> 将只在父组件模板可用
'my-component': Child
}
})
</script>
</body>
</html>


DOM 模板解析注意事项
当使用 DOM 作为模板时 (例如，使用 
el
 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 
<ul>
、
<ol>
、
<table>
、
<select>
 这样的元素里允许包含的元素有限制，而另一些像 
<option>
 这样的元素只能出现在某些特定元素的内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
<my-row>...</my-row>
</table>


应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：
<script type="text/x-template">

JavaScript 内联模板字符串
.vue
 组件

因此，请尽可能使用字符串模板。

上面的意思是下面的例子是会不行的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<select>
<optioncomp></optioncomp>
</select>
</div>

<script>
new Vue({
el: '#app',
components:{
'optioncomp':{
template: '<option >a</option>'
}
}
})
</script>
</body>
</html>

但是用is特殊属性可以：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<select>
<option is="optioncomp"></option>
</select>
</div>

<script>
new Vue({
el: '#app',
components:{
'optioncomp':{
template: '<option >a</option>'
}
}
})
</script>
</body>
</html>


或者temp模板标签也可以：

<body>
<div id="app">
<select>
<option is="optioncomp"></option>
</select>

<!--模板内容存放区域-->
<script type="x-template" id="optioncompTemp">
<option >a</option>
</script>
</div>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script> new Vue({ el: '#app', components:{ 'optioncomp':{ template: '#optioncompTemp' } } }) </script></body>

或者内联模板字符串也行

<body>
<div id="app">
<selectcomp></selectcomp>
</div>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script> Vue.component('optioncomp',{ template: '<option >a</option>' }); new Vue({ el: '#app', components:{ 'selectcomp':{ template: ' <select>
<optioncomp></optioncomp></select>' } } }) </script></body>


data必须是函数
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：
data
 必须是函数。实际上，如果你这么做：
Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: {
message: 'hello'
}
})
那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 
data
 必须是一个函数。但理解这种规则为何存在也是很有益处的，

所以让我们先作个弊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>

<script>
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'
})
</script>
</body>
</html>








































由于这三个组件实例共享了同一个 
data
 对象，因此递增一个
counter 会影响所有组件！这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题：

data: function () {
return {
counter: 0
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>

<script>

Vue.component('simple-counter',{
template:'<button v-on:click="counter+=1">{{counter}}</button>',
data: function () {
return {
counter: 0
}
}
})
new Vue({
el: '#example-2'
})
</script>
</body>
</html>




















                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航