Vue组件

Vue组件

组件作用：   用来减少代码量,在使用Vue开发过程中,可以根据不同业务功能将页面划分多个不同的组件,然后由多个组件去完成整个页面的布局。同时方便功能的复用，若不同页面中存在相同的功能只需要引入该功能组件。

全局组件

全局组件注册给Vue实例,可以在任意Vue实例的范围内使用该组件，即在任何vue页面中都可以引用该组件

<div id="app">
    <!--使用全局组件，标签为组件名-->
    <user-login></user-login>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局组件注册  参数1:组件名称  参数2:组件配置对象 (template: 用来书写组件的html代码)
    Vue.component('userLogin',{
        template:'<div><h1>用户登录</h1></div>'
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
</script>

注意：

• Vue.component用来开发全局组件参数1: 组件的名称  参数2: 组件配置{ template:}   
   template: ''用来书写组件的html代码, template中必须有且只有一个root 元素
• 使用时需要在Vue的作用范围内根据组件名使用全局组件
• 如果在注册组件过程中使用 驼峰命名组件的方式 ,在使用组件时 ,必须将驼峰的所有单词小写并加横线使用

局部组件

在模板内部的JavaScript对象中注册，通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成无谓的负担

  //1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明
    <template id="loginTemplate">
        <h1>用户登录</h1>
    </template>
  
  //2.定义变量用来保存模板配置对象
      let login ={   //具体局部组件名称
          template:'#loginTemplate'  //使用自定义template标签选择器即可
      };
  
  //3.注册组件    
      const app = new Vue({
          el: "#app",
          data: {},
          methods: {},
          components:{  //将组件构造器放在了实例中，称为局部组件
              login:login  //注册局部组件
          }
      });
  
   //4.局部组件使用 在Vue实例范围内
       <login></login>

components属性注册局部组件对象的形式为 key : value

key是自定义标签名，即组件使用时的标签名

value是组件名

模块系统中局部注册

如果你需要在局部注册之前导入每个你想使用的组件，在 ComponentB 的模板中使用 ComponentA 和 ComponentC组件

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

组件模板抽离的写法

 <div id="app">
    <!--使用组件，书写时改驼峰命名为短横线-->
        <my-cpn></my-cpn>
    </div>
    <!--组件模板抽取-->
    <template id="myCpn">
        <h3>组件模板抽离</h3>
    </template>

<script>

    let app = new Vue({
        el:'#app',
        components:{
            'my-cpn':{    //使用时的标签名
                template:'#myCpn'，
                data(){
                  return {}
                  },
                methods:{},
                props:[]
            }
        }
    })
</script>