vue注册组件

注册全局组件

//  下面是创建一个新的构造器，组件构造器
const hello = Vue.extend({
  template: '<div>hello !</div>'
})
//  my-hello组件注册，第二个参数传入的是扩展的构造器
Vue.component('my-hello', hello)
//  my-world组件注册，第二个参数传入的是选项对象
Vue.component('my-world', {
  template: '<div>world ！</div>'
})

Vue.extend(options)是一个基础Vue构造器，使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象，data 选项是特例，需要注意：在 Vue.extend() 中它必须是函数。
用template标签即可，用字面量形式定义：

<div id="app">
    <hello></hello>
</div>
<template id="hello">
    <!--模板标签中的HTML必须只有一个根元素，而且不能写在app中-->
    <div>
        <ul>1</ul>
        <ul>2</ul>
        <ul>3</ul>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    Vue.component('hello',{
        template: '#hello'
    })
    new Vue({
        el: '#app'
    })
</script>

注册局部组件
组件配置项和new Vue实例的区别：
除了el和data，其它完全相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
<div id="app">
    <hello-component></hello-component>
</div>
<template id="hello">
    <div>你好</div>
</template>
<script src="js/vue.js"></script>
<script>
    const hello = Vue.extend({
        template: '#hello'
    })
    new Vue({
        el: '#app',
        components:{
        	//组件名建议用多个单词，在页面中用连字符写标签。
        	//属性名为自定义标签名，驼峰命名。
        	//属性值为组件构造器或者配置项。这里是构造器
            helloComponent: hello
        }
    })
</script>
</body>
</html>

注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

data: vm => ({ a: vm.myProp })

注意点：
1.组件名的书写，在js中用驼峰书写，在DOM模板中用连字符，即写成标签的时候。

猜你喜欢