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>