📖Vue-cli 组件与插槽

前言

写一篇文章巩固一下组件与插槽的知识

组件

<组件是 Vue 中强大的功能之一，可以重复利用组件中的代码如(头部，底部，侧边栏等重复性高的代码块)>，其中组件分为全局注册组件与局部注册组件，全局组件指只需引用一次即可在全局中使用，局部组件只在被其他组件引用的时候才可以，麻烦的就是需要每次引用

插槽

<插槽类似与主板上的那些插槽，每个插槽有它不同的功能，插槽之间相互独立也常用于组件之间的通信>，插槽分为匿名插槽，具名插槽，作用域插槽

开始记录

组件

局部组件

<butone></butone>
//index.vue
import butone from '@/components/componented/button_one'//组件
export default {
  name: 'component',
  data(){
  },
  components:{
    'butone':butone, //注册组件
  }

全局组件

//main.js
import button_two from '@/components/componented/button_two'//引入组件
Vue.component("buttwo",button_two)//全局注册组件

//index.js
<buttwo></buttwo>//直接调用即可

组件之间的传值

父组件传值子组件
前面我们已经将组件注册好了，下面直接开始传值

//index.vue (父组件)
<buttwo :text='futext'></buttwo>

//button_two.vue (子组件)
<p>这是父组件传递过来的参数：{{text}}</p>
export default {
  name: 'button_two',
  data(){
  },
  props:["text"],
}

子组件传值父组件

//index.vue (父组件)
<butone @button_one='butone'></butone>

//button_one (子组件)
<button @click='butone'>我是 button_one-{{number}}</button>
export default {
  name: 'button_one',
  data(){
    return {
      number:1
    }
  },
  methods:{
    butone(){
      this.number++;
      this.$emit("button_one",this.number);
    }
  },
}

插槽

匿名插槽

//index.vue (父组件)
<chaone>我是传递的值</chaone>

//cha_one.vue (子组件)
<slot></slot>

具名插槽

//index.vue (父组件)
<chatwo v-slot:cha_two>{{jumin}}</chatwo>

//cha_two.vue (子组件)
<slot name='cha_two'></slot>

作用域插槽

//index.vue (父组件)
<chathree v-slot:cha_three='slotProps'>{{slotProps.navFooter}}</chathree>

//cha_three.vue (子组件)
<slot name='cha_three' :navFooter='three_text'></slot>

export default {
  name: 'cha_three',
  data(){
    return {
      three_text:'这是插槽3的内容'
    }
  }
}