vue中关于组件的知识

创建组件: 有两种方法,一种通过 Vue.component,另一种为Vue.extent,下面分别介绍:

通过Vue.extent注册构造函数,然后在将实例对象挂载到指定节点
新建一个工具文件,让后在main.js中引入,完事挂在prototype上面

例子:

import Vue from "vue";
import Modal from "@/components/tools/modal";
const ModalConstrutor = Vue.extend(Modal);

function modal(options) {
  const instance = new ModalConstrutor({
    data: options,
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
}

export default { modal };

分析: Modal就是一个普通的组件,通过Vue.extend可以生成一个构造函数,
然后通过new一个实例,期间,可以通过参数形式,合并原来组件中的data值,最后将这个实例的$el挂在到指定节点上.

component 创建组件,常规的普通子组件就不再介绍,都会了,下面来说复杂子组件

先来看一个实现树形机构的例子,采用递归形式

<template>
  <div class="treeBox">
    <div class="box">
      <p @click="handleToggle">
        <span
          class="icon"
          v-if="data.childrenList && data.childrenList.length > 0"
        >
          {{ isShow ? "-" : "+" }}
        </span>
        <span>{{ data.parent.name }}</span>
      </p>
      <ul v-show="isShow">
        <tree
          v-for="child in data.childrenList"
          :key="child.parent.id"
          :data="child"
        />
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree",
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    handleToggle() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

分析: 使用组件递归一定要注意,必须给该组件一个name属性,然后用这个name来递归调用, 因为是递归,那实现的组件必须具有唯一的特性,所以在最上层就不能用循环了,这里我传里进来值就应该是个对象的形式.

注意: 如果在这里传递的是个数组,那么要在调用组件的地方使用循环才对,因为如果在内部使用循环的话,那么就会在同时生成好几个部分,那么点击打开文件按钮的时候,isSow就会被同时被触发关闭打开.

自定义组件插槽进自定义组件,然后他们之间传奇以及修改值要怎么干

用一个手风琴的例子来看

<collapse targetIndex="2">
  <collapse-item title="标题 1" name="1">
      <div>this is block 1</div>
    </collapse-item>
    <collapse-item title="标题 2" name="2">
      <div>block 2</div>
    </collapse-item>
    <collapse-item title="标题 3" name="3">
      <div>that is block 3</div>
    </collapse-item>
  </collapse>

分析: targetIndex的值是默认打开项目的name值

collapse组件

<template>
  <div class="collapse">
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    targetIndex: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      value: "",
    };
  },
  created() {
    this.value = this.targetIndex;
    //由子组件来的事件,修改当前组件的值
    this.$on("toggleIndex", (index) => {
      this.value = index;
    });
  },
  provide() {
    return {
      collapse: this,  //像子组件暴露自己的对象
    };
  },
};
</script>

collapseItem组件

<template>
  <div class="collapseItem" @click="handleClick">
    <h4 class="title">{{ title }}</h4>
    <div class="wrap" v-show="isShow">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    name: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {};
  },
  inject: ["collapse"],  //获取父组件的对象
  computed: {
    isShow() {
      return this.collapse.value === this.name;
    },
  },
  methods: {
    handleClick() {
    //添加触发父组件修改值的事件,同eventBus,只是这里用的是父组件来添加$emit
      this.collapse.$emit("toggleIndex", this.name);
    },
  },
};
</script>

知识点1: 复杂父子组件或者祖孙级组件之间传递值可以借助,在父组件中通过provide函数,返回一个对象,然后在子孙组件中,通过inject来获取该对象

知识点2:如果子孙组件中需要修改父组件中的值,那么可以在子孙组件中通过$emit注册一个事件,然后在父组件中通过$on的回调函数更新数据