【vue】注册组件基本步骤

组件的使用分成三个步骤

视频

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

模板：

 //3.使用组件
 <div id="app">
     <my-cpn></my-cpn>
 </div>
 //1.创建组件构造器
<script>
 const myComponent=Vue.extend({
 template:
 <div>
    <h2>组件标题</h2>
    <p>组件中的某个段落</p>
 </div>
});
//2.注册组件，并且定义组件标签名称
Vue.component('my-cpn',myComponent)
 let app=new Vue({
      el:'#app'
  })
</script>

例子：

    
  <div id="app">
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
  div>
  <script src="vue.js">script>
  <script>
      //1.创建组件构造器对象
      const cpnC=Vue.extend({
          //传的参数是个对象
          template:`
          

            
标题
            
内容
          `
      })
      //2.注册组件
      Vue.component('my-cpn',cpnC)
      const app=new Vue({
          el:'#app',
          data:{
              message:'hello'
          }
      })
  script>

结果：

Vue.extend()
1.调用Vue.extend()创建的是一个组件构造器
2.通常在创建组件构造器时，传入template代表我们自定义组件的模板
3.该模板就是在使用到组件的地方，要显示的HTML代码
4.事实上，这种写法在Vue2.x文档中几乎已经看不到了

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

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

全局组件和局部组件

全局组件：可以在多个Vue的实例下面使用
< script>
1.创建组件
const cpnC=Vue.extend({
template:
< div>
< h2>
< p>

})
2.注册组件（全局）
Vue.component(‘cpn’,cpnC)

局部组件
//挂载到某个具体实例里写，且可以在具体的实例里用，在其他实例里无法解析
const app = new Vue({
el:’#app’,
data:{
message:’’
},
components:{
//cpn使用组件时的标签名
//组件使用的标签名：value
cpn: cpnC
}
}}