Vue快速入门(六：组件注册)《快乐Vue》
2019-03-04 本文已影响0人
Negen
组件注册
背景
代码复用一直是软件开发中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引入这段代码后对现有的程序产生影响。从 jQuery 开始，我们就开始通过插件的形式复用代码，到 Requirejs 开始将 js 文件模块化，按需加载。这两种方式都提供了比较方便的复用方式，但往往还需要自己手动加入所需的 CSS 文件和 HTML 模块。现在，Web
Components 的出现提供了一种新的思路，可以自定义 tag 标签，并拥有自身的模板、样式和交互。Angularjs 的指令，Reactjs 的组件化都在往这方面做尝试。同样，Vue.js 也提供了自
己的组件系统，支持自定义 tag 和原生 HTML 元素的扩展
全局注册
全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用，注
册方式如下：
Vue.component('my-component', MyComponent);
这条语句需要写在 var vm = new Vue({…}) 之前，注册成功之后，就可以在模块中以自
定义元素 <my-component> 的形式使用组件。对于组件的命名，W3C 规范是字母小写且包
含一个短横杠“-”，Vue.js 暂不强制要求，但官方建议遵循这个规则比较好。
整体示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 使用自定义的component -->
<my-component></my-component>
</div>
<script type="text/javascript">
//定义component
var MyComponent = Vue.extend({
template: '<h2>this is my MyComponent</h2>'
})
//注册component
Vue.component('my-component', MyComponent)
//实例化Vue
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
运行效果如下：
component示例.png
局部注册
局部注册则限定了组件只能在被注册的组件中使用，而无法在其他组件中使用，注册方式如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 使用自定义的component -->
<parent-component></parent-component>
</div>
<script type="text/javascript">
//定义component
var MyComponent = Vue.extend({
template: '<h2>this is my MyComponent</h2>'
})
//全局注册component
Vue.component('my-component', MyComponent)
//局部注册component
var Child = Vue.extend({
template: '<h2>this child component<h2>'
})
var Parent = Vue.extend({
template: '<h2>this child component<h2><my-child></my-child>',
components:{
'my-child': Child
}
})
Vue.component('parent-component', Parent)
//实例化Vue
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
运行效果如下（如果在页面根部直接用<my-child>则会报错）：
局部注册.png
注册语法糖
Vue.js 对于上述两种注册方式也提供了简化的方法，我们可以直接在注册的时候定义组
件构造器选项，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 使用自定义的component -->
<my-component></my-component>
<parent-component></parent-component>
</div>
<script type="text/javascript">
//全局注册component
Vue.component('my-component', {
template: '<h2>this is my MyComponent</h2>'
})
//局部注册component
var Parent = Vue.component('parent-component',{
template: '<h2>this Parent component<h2><my-child></my-child>',
components:{
'my-child': {
template: '<h1>this Child component<h1>'
}
}
})
Vue.component('parent-component', Parent)
//实例化Vue
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
