vue3 若依框架父子组件通信语法糖格式

最新推荐文章于 2024-08-30 11:24:14 发布

猫和老许

最新推荐文章于 2024-08-30 11:24:14 发布

阅读量538

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_58346650/article/details/125080086

版权

子组件

<template>
  <div class="treeBox">
    <div class="treeTitle">
      <p>选择类别</p>
    </div>
    <div class="treeIptbox">
      <el-input v-model="category" placeholder="请输入组织单位名称" clearable />
      <div class="findBtn">
        <span></span>
      </div>
    </div>
    <el-tree
      :highlight-current="true"
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      accordion
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from "vue";

// 接收父组件传过来的参数 defineProps、defineEmits不需要引入！！！
const props = defineProps(["treeData"]);

// 定义子组件方法
const emit = defineEmits(["treeNodeId"]);

// 定义点击事件
const handleNodeClick = (data) => {
  // 传递事件和参数
  emit("treeNodeId", data.id);
};

let category = ref("");
watch(category, (newName, oldName) => {});

// 定义树状图组件数据格式
const defaultProps = {
  children: "children",
  label: "class_name",
};

// 抛出方法
defineExpose({ handleNodeClick });
</script>

父组件

// 使用子组件  已经全局引入了  注意绑定名称 与子组件定义的相同！！！
<TreeLists :treeData="selProClass" @treeNodeId="getTreeNodeId" />


<script lang="ts" setup>
// 传给子组件的数据
const selProClass = ref([]);

// 在子组件点击事件中 调用父组件的此方法
function getTreeNodeId(id) {
  console.log(id,"我是子组件传过来的id")
}
<script/>