了解一下vue的组件

全局组件

首先开始一个简单的全局组件：

<template>
<div id="App">
<!-- 使用组件-->
  <show></show>
</div>
</template>
<script>
//注册组件
Vue.component('show',{
    template: '<h1>我想秀一下</h1>',
})

var it = new Vue({
   el:'#App',
   data:{
   },
   
})
</script>

这样最简单的组件就完成了，这里说明一下，全局的注册要在Vue实例之前

怎么在注册的组件中使用data呢？

组件中data的使用

直接上代码：
这里就不写样式了！！！

<template>
<div id="App">
<!-- 使用组件-->
  <show></show>
</div>
</template>
<script>
//注册组件
Vue.component('show',{
    template: '<h1>我想秀一下！ {{ msg }}</h1>',
    //注意这里的data要使用函数的形式
    data() {
     return {
       msg:'还是在秀一下',
     };
    }
})

var it = new Vue({
   el:'#App',
   data:{
   },
   
})
</script>

这里简单说明一下data不能是对象的原因，在多个实例中，如果data是对象，会造成多个实例共同使用一个data，会出错，如果是函数，return返回的其实是拷贝值，从而不会影响。这和JavaScript的对于变量的存储机制有关。
有兴趣可以看一下
https://www.cnblogs.com/souvenir/p/4969565.html

第二种注册全局组件的方法

<template>
<div id="App">
<!-- 使用组件-->
  <show></show>
</div>
</template>
<template id="show">
<h1>{{ msg }}</h1>
</template>
<script>
//注册组件
Vue.component('show',{
    template: '#show',
    data() {
     return {
       msg:'就是秀',
     };
    }
})

var it = new Vue({
   el:'#App',
   data:{
   },
   
})
</script>

这样就简单介绍了一下全局组件的注册，
更多的全局组件的方法：https://www.cnblogs.com/qianduanting/p/7533394.html

局部组件

下面介绍一下局部组件的使用

<template>
<div id="App">
<h1>{{ msg }}</h1>
<!-- 使用组件-->
  <show></show>
</div>
<script>
var it = new Vue({
   el:'#App',
   data:{
      msg: '这里是父组件',
   },
   //在父组件注册子组件
  components: {
      'show': {
        template: '<h1>{{ msg }}--------不秀会死</h1>',
        data() {
        return {
          msg: '这里是子组件'
        }
        },
      }

   
})
</script>

局部的注册要在父组件中注册，其他的使用与全局组件是一样，
局部组件的注册要注意components 要加s。

就介绍到这里了，希望对大家有帮助。