定义

组件 (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>

















Logo

前往低代码交流专区

更多推荐