vue3 setup 语法糖,父子传参

//父传子

vue3 setup 语法糖,父子传参_第1张图片

<template>
  <div>
    <div>用户管理div>
    <div v-for="item in state.dataLlst" :key="item.id">{{ item.name }}div>
    <detail  :dataList="state.datalist" :count="count">detail>
  div>
template>
<script setup>
import { getuserListApi } from "@/api/user";
import { reactive, onMounted, ref, toRefs, nextTick } from "vue";
import detail from "@/views/user/detail.vue";
let count =ref(10)
let state = reactive({
  datalist: [],
});
onMounted(() => {
  getData();
});
let getData = async () => {
  let { code, data } = await getuserListApi();
  if (code == 0) {
    state.dataLlst = data;
  }
};
script>
<template>
  <div>
    <div v-for="item in dataList" :key="item.id">{{ item.name }}div>
    <div>{{count}}div>
  div>
template>
<script setup>
import { defineProps, toRefs } from "vue";
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
  dataList: {
    default:[],
  },
});
let {count,dataList} =toRefs(props)

script>

vue3 setup 语法糖,父子传参_第2张图片

//父组件
<template>
  <div>
    <div>用户管理div>
    <div v-for="item in state.dataLlst" :key="item.id">{{ item.name }}div>
    <detail  :dataList="state.datalist" :count="count" @updateFather="getSonMessage">detail>
    <div>{{state.tip.message}}div>
    <div>{{message}}div>
  div>
template>
<script setup>

import { getuserListApi } from "@/api/user";
import { reactive, onMounted, ref, toRefs, nextTick } from "vue";
import detail from "@/views/user/detail.vue";
let count =ref(10)
let message = ref("")
let state = reactive({
  datalist: [],
  tip:{}
});
onMounted(() => {
  getData();
});
let getData = async () => {
  let { code, data } = await getuserListApi();
  if (code == 0) {
    state.dataLlst = data;
  }
};
let getSonMessage=(formSon1,formSon2)=>{
  state.tip = formSon1
  message.value = formSon2
}
script>
//子组件
<template>
  <div>
    <div v-for="item in dataList" :key="item.id">{{ item.name }}div>
    <div>{{count}}div>
    <el-button @click="sonUpFather">传送数据el-button>
  div>
template>
<script setup>
import { defineProps, toRefs ,defineEmits} from "vue";
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
  dataList: {
    default:[],
  },
});
let {count,dataList} =toRefs(props)
let emit = defineEmits(['updateFather'])
let sonUpFather=()=>{
  emit('updateFather',{message:"来自子元素复杂数据"},"来自子元素的简单数据")
}
script>

vue3 setup 语法糖,父子传参_第3张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)