vue注册组件

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

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

<div id="app">
    <hello>hello>
div>
<template id="hello">
    
    <div>
        <ul>1ul>
        <ul>2ul>
        <ul>3ul>
    div>
template>
<script src="js/vue.js">script>
<script>
    Vue.component('hello',{
        template: '#hello'
    })
    new Vue({
        el: '#app'
    })
script>
  • 注册局部组件
    组件配置项和new Vue实例的区别:
    除了eldata,其它完全相同

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>templatetitle>
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模板中用连字符,即写成标签的时候。

你可能感兴趣的:(vue)