vue 容器组件 展示组件 表单

一.注册组件的基本步骤（方法一）

• 创建组件构造器对象 ：调用Vue.extend()方法创建组件构造器
• 注册组件：调用Vue.component()方法注册组件
• 使用组件：在Vue实例的作用范围内使用组件

<div id="app">
    	3.调用组件
        <my-cpn></my-cpn>
    </div>
    
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
    1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
        <div>
            <h2>我是标题</h2>
            <p>我是内容456</p>
            <p>我是内容1223</p>
        </div>`
    })
     2.注册组件
     Vue.component('my-cpn',cpnC) // 组件标签名，组件构造器
     var app = new Vue({
			el :"#app"
		})
    </script>

1.Vue.extend()

• 调用Vue.extend()创建的是一个组件构造器
• 通常在创建组件构造器时，在template内要写入我们自定义组件的模板，template后面一定要用两个标签来包围
• 该模板就是在使用组件的地方，要显示的HTML代码

2.Vue.component()

• 调用Vue.component()是将刚才的组件构造器注册为一个组件，并给它起一个组件的标签名称
• 所以需要传递两个参数：1.注册组件的标签名 2.组件构造器

3.组件必须挂在某个Vue实例下，否则它不会生效

二.全局组件和局部组件

1.全局组件：
在<script></script>内部注册的组件Vue.component()，即为全局组件，它可以在多个Vue实例下使用

组件模板抽离的全局变量写法
Vue.component('cpn',{
	template: '#cpn'
})

2.局部组件
在具体某个Vue实例内部注册的组件，称为局部组件，在开发时使用局部组件居多

var app = new Vue({
	el: "#app",
	components: {
		cpn: cpn-c
		cpn为使用组件时的标签名，cpn-c为组件构造器
	}
})

三.注册组件的语法糖写法（方法二）

• 在使用上面注册组件的方式，可能会有些繁琐
• Vue为了简化这个过程，提供了注册组件的语法糖
• 主要省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来替代

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

四.组件模板抽离的写法

1.script标签，注意：类型必须是text/x-template(不常用)

<script type="text/x-template" id="cpn">
<div>
    <h1>我是标题</h1>
     <p>我是内容</p>
</div>
<script>

2.template标签，基本上写在挂载区域的下方（常用）

<div id="app"> 
     <my-cpn></my-cpn>
</div>
    
<template id="cpn">
      <div>
          <h1>我是标题</h1>
          <p>我是内容</p>
      </div>
</template>

注册一个局部组件
var app = new Vue({
         el: "#app",
         components:{
             'my-cpn': {
                 template: '#cpn'
             }
         }
     })