一起学Vuejs（十）----- 组件注册

不积跬步，无以至千里；不积小流，无以成江海。

Vuejs语言基础

组件注册(全局注册)：

1. 创建组件构造器：调用Vue.extend()方法创建组件构造器（这种写法在Vue2.0中几乎已经看不到了）

(1) 调用Vue.extend()创建的是一个组件构造器

(2) 通常在创建组件构造器时，传入template代表我们自定义组件的模板

2. 注册组件：调用Vue.component()方法注册组件

(1) 调用Vue.component()，将刚才的组件构造器注册为一个组件，并且给他起一个组件的标签名称

(2) 所以需要传递两个参数：1.注册组件的标签名 2.组件构造器

3. 使用组件：在Vue实例的作用范围内使用组件

(1) 组件必须挂载在某个Vue实例下，否则它不会生效

<div id="app">
<!--  3.使用组件-->
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>

<script>
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    //传入template自定义组件的模板
    template:
        `<div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
         </div>`
  })
  // 2.注册组件
  // Vue.component('组件的标签名')
  Vue.component('my-cpn', cpnC)
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀'
    }
  })
</script>

上面是第一种方式 extend，简要如下：

const cpnC = Vue.extend({
    //传入template自定义组件的模板
    template:
        `<div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
         </div>`
  })
  // 2.注册组件
  // Vue.component('组件的标签名')
  Vue.component('my-cpn', cpnC)

使用：

<my-cpn></my-cpn>

注意：也可以将 extend 直接写在 component 中：

Vue.component('my-cpn', Vue.extend({
    template:
        `<div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
         </div>`
  }))

第二种方式，不用 extend：

Vue.component('my-cpn', {
    template:
        `<div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
         </div>`
  })

第三种方式，在页面上定义外部 template 元素：

vue.js:

Vue.component('my-cpn', {
    template:'#temp'
});

html:

<template id="temp">
    <h2>这是html中的temp</h2>
</template>

组件注册(局部注册)：

第一种：

js:

const cpnC = new Vue({
    el:"#newBrand",
    data:{},
    components:{
      mycpn:{
        template:
            `<div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈</p>
             </div>`
      }
    }
  });

html:

<div id="newBrand">
	<mycpn></mycpn>
</div>

第二种：

js:

const cpnC = new Vue({
    el:"#newBrand",
    data:{},
    components:{
      mycom1:{
        template: '#temp'
      }
    }
  });

html:

<template id="temp">
    <div><h3>这是局部template</h3></div>
</template>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <my-cpn></my-cpn>
    </div>

    <template id="temp">
        <div>
            <h2>qwq</h2>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('my-cpn', {
            template: '#temp'
        })

        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
            }
        })
    </script>
</body>
</html>

博客借鉴：https://blog.csdn.net/vfjcgg/article/details/106771236

https://blog.csdn.net/sinat_38832964/article/details/90701722

posted on 2020-10-12 22:09 smile学子阅读(138) 评论(0) 收藏举报