vue 封装组件

最新推荐文章于 2023-08-20 10:19:39 发布

原创最新推荐文章于 2023-08-20 10:19:39 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

1.新建一个vue文件

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

2.引入组件
全局或局部引入
如果为全局，则在main.js里面

import tr from './tr.vue'
vue.component('Tr',tr)

局部引入
在要引入的父组件文件里

<script>
import Tr from "./tr.vue";
export default {
  components: {
    Tr,
  },
  </script>

3.使用

<Tr :item="item" :index="index"></Tr>

在这里插入图片描述
4.子传父多个值
父组件

<Tr @getTrData="getTrData"></Tr>
<script>
export default {
	methods:
	getTrData(val1,val2){
	this.currentIndex=val1,
	this.isOpenChildrenNode=val2
}
}
</script>

在这里插入图片描述

子组件

<button @click="openChildrenNode(index)"></button>

<script>
export default {
  props: {
    index: Number,
    item: Object,
  },
  data() {
    return {
      isOpenChildrenNode: false,
      currentIndex: -1,
    };
  },
  methods: {
    openChildrenNode(index) {
      this.isOpenChildrenNode = !this.isOpenChildrenNode;
      this.currentIndex = index;
      this.$emit("getTrData", this.currentIndex, this.isOpenChildrenNode);
    },
  },
};
</script>

在这里插入图片描述