自定义组件

局部引入

1、先将组件写好，放在一个文件中

组件的写法和正常的.vue文件相同，如果需要接收参数，可使用props传值，以封装一个标题组件举例。

下面是项目目录：

 

 下面是组件内容

<template>
  <div class="title-small">
    <ul class="al-cen">
      <li class="icon"></li>
      <li class="text left-10">{{ content }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    content: "",//接收参数
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.title-small {
    background-color: rgb(231, 231, 231);
    padding: 8px 16px;
    width: 500px;
    border-radius: 2px;
  .icon {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 2px solid rgb(19, 180, 230);
  }
  .text {
    font-size: 16px;
  }
}
</style>

2、局部引入组件并使用

局部引入可在需要引入的项目中单独引入

import titleSmall from "./form/titleSmall.vue";
components: {titleSmall},
<template>
  <div>
      //直接使用注册的标签即可，content内容为传给组件的值
     <titleSmall class="top-30" content="标题"></titleSmall>
  </div>
</template>
 
<script>
import titleSmall from "./form/titleSmall.vue";//引入组件
import "../style/form.scss";
export default {
  name: "",
  data() {

全局引入

局部引入完全一样，仅仅是引入方式有所区别

1、写组件

和上面的局部引入一样

2、引入组件

局部引入组件是在需要使用组件的文件中单独引入，这种方法很常见，在日常使用中大多都是采用局部引入。
但对于某些使用很频繁的组件，如标题这样的可能会所有文件都会使用的组件，这样在每个文件都引入显得很是繁琐，且万一遇到需求改变，修改起来也是异常麻烦，所以全局引入在此时就显得很有必要了。
全局引入的方法也很简单，仅仅是从单文件引入改为在main.js文件中引入即可 

import titleSmall from './views/form/titleSmall.vue';//引入组件
Vue.component('title-small',titleSmall)//注册组件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

    return {
      content: "",
      bat: "",
    };
  },
  components: {titleSmall},//注册组件
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

全局引入
全局引入方法和局部引入类似，组件的写法与
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import './style/public.scss';
import './assets/text/text.css';
import titleSmall from './views/form/titleSmall.vue';
Vue.component('title-small',titleSmall)
Vue.prototype.$axios = axios
Vue.use(ElementUI);
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

组件关系

组件关系 当项目中的组件越来越多之后，组件间可能会出现彼此嵌套的情况。 一个组件里包含了另外一个组件，包含别人的叫父组件，被包含的叫子组件。 同级别的就叫兄弟组件。

 Vue中的solt插槽

什么是solt插槽

插槽就是父组件往子组件中插入一些内容。

插槽的种类 

有三种方式，默认插槽，具名插槽，作用域插槽

1.默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据

单个slot （默认插槽 或 匿名插槽）

就是没有名字的插槽，一个组件里面只允许存在一个匿名插槽。

    <div class="fa">
        <h1>父组件</h1>
        <child>
           <p>父组件中写的文本</p>
        </child>
    </div>

子组件内容

父组件在child子组件中放置p标签，子组件中想要显示p标签，就必须放置slot
 
    <div class="child">
         <h2>子组件</h2>
        <slot>匿名插槽的默认内容</slot>
    </div>
 编译结果：

child组件slot里的内容会替换成 p标签里面的内容，如果父组件没有在子组件插入内容则会渲染slot里面的默认内容。

 2. 具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的        名字填充到对应的位置。

父组件：

    
 

   <div class="fa">
        <h1>父组件</h1>
        <child>
            <div class="son" slot="s1">
                <span>111</span>
            </div>
            <div class="son" slot="s2">
                <span>222</span>
            </div>
            <-- 以下是多余的内容，将会自动填充到匿名插槽中-->
            <div class="son">
                <span>333</span>
            </div>
        </child>
    </div>

    

 子组件：

    
    <div class="child">
        <h2>子组件</h2>
        // s1插槽
        <slot name="s1"></slot>
        // s2插槽
        <slot name="s2"></slot>
        // 匿名插槽
        <slot></slot>
    </div>
具名插槽的缩写方式：

   以#号形式加上插槽名称

    
    <div class="fa">
        <h1>父组件</h1>
        <child>
            <div class="son" #s1>
                ...
            </div>
        </child>
    </div>

    3.作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽         数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

  
 

   <div class="fa">
        <h1>父组件</h1>
        <child >
            <template v-slot="props">
                {{props.item}}
            </template>
        </child>
    </div>
    
    
 
    
子组件内容

 
<template>
    <div class="child">
         <h2>子组件</h2>
        <ul>
            <li v-for="item of arr" >
                <slot :item="item"></slot>
            </li>
        </ul>
    </div>
<template/>
<scirpt>
  data(){
        return {
            arr:[111, 222, 333]
        }
    }
<scirpt/>