vue3.2图片上传Demo搭建 3 搜索栏 实现

抽离form 表单    1通过defineEmits 实现  从上往下 传递 父子组件传递

<template>
   <form class="form-inline mt-2 mt-md-0">
       <input class="form-control"
        type="text" 
        placeholder="Search in Drive"
         aria-label="Search"
         v-model="q"
         @keydown.enter.prevent="handleEnterKey"
         />
     </form>

</template>
<script setup>
 import {ref} from 'vue';
 const q=ref("hello world")

 const emits=defineEmits(["handleValueQ"])

 const handleEnterKey=()=>{
        emits("handleValueQ",q.value)
 }
</script>

Navbar.vue

<template>
  <nav class="navbar navbar-light bg-white navbar-expand-lg border-bottom">
    <div class="container">
      <a class="navbar-brand" href="/"><strong>Vue</strong>图片上传</a>
         <SearchForm  @handleValueQ="sendQToApp($event)"/>
    </div>
  </nav>
</template>
<script setup>
import SearchForm from './SearchForm.vue'
const emits=defineEmits(["handleValueQ"])
const sendQToApp=(value)=>{
  console.log(value);
  emits("handleValueQ",value)
};

</script>

<style>
</style>

APP.vue

<template>
<Navbar  @handleValueQ="getValueFormSearchForm($event)"/>
<MyFiles  :q="q"/>

</template>

<script setup>
import  Navbar from './components/Navbar.vue'
import  MyFiles from './pages/MyFiles.vue'
import { ref } from 'vue';
const q= ref("");

const getValueFormSearchForm=(value)=>{
   q.value=value
console.log(value)

}

</script>

MyFiles.vue  

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
           <SortToggler @sort-change="hanleSortChange($event)"/>
        </div>
        <FilesList :files="files"/>

    </div>

</template>
<script setup>
//http://localhost:3031/files?_sort=name&_order=desc 倒序
//http://localhost:3031/files?_sort=name&_order=asc 正序
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import SortToggler from '../components/SortToggler.vue';
import axios from 'axios'

import { ref,onMounted,reactive,watchEffect,watch} from 'vue';
const props=defineProps({
  q:{
      type:String,
  },

})

const files=ref([]);
//修改query值 实现倒序正序
const query =reactive({
    _sort:"name",
    _order:"asc",
    q:"",

})
//平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。
//URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据

watchEffect(
   async ()=>{
       query.q=props.q;
   const {data}=await axios.get(
`http://localhost:3031/files?${new URLSearchParams(query)} `);

   files.value=data;
}
);

// watch(()=>query._order,
//    async ()=>{
//        console.log(`http://localhost:3031/files?${new URLSearchParams(query)} `)
//    const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);
//     console.log(data)
//    files.value=data;
// },{immediate:true}
// );



const hanleSortChange =(payload)=>{
    console.log(payload);
 
    query._sort=payload.column;
    query._order=payload.order;  
}


</script>

<style>
</style>

2，SearchForm  从MyFiles 传值给SearchForm

* 1.要素从MyFiles传值给SearchForm

  * 2.桥梁NavBar 可以直接传值给SearchForm

  * 3.内容显示在navbar,数据的绑定放到MyFiles

通过   teleport  

<teleport to="#search-form">
                <SearchForm v-model="query.q"/>
        </teleport>

<template>
   <form class="form-inline mt-2 mt-md-0">
       <input class="form-control"
        type="text" 
        placeholder="Search in Drive"
         aria-label="Search"
         :value="modelValue"
         @keydown.enter.prevent="handleEnterKey"
         @keydown.esc.prevent="handleEscKey"
         />
     </form>

</template>
<script setup>
 import {ref} from 'vue';
 /**
  * 1.要素从MyFiles传值给SearchForm
  * 2.桥梁NavBar 可以直接传值给SearchForm
  * 3.内容显示在navbar,数据的绑定放到MyFiles
  */

const emits=defineEmits(["update:modelValue"]);


 const handleEnterKey=(event)=>{
     emits("update:modelValue",event.target.value);
 }

 const handleEscKey=()=>{
     emits("update:modelValue","");
 }

 defineProps({
    modelValue:{
        type:String,
    }
})

</script>

<template>
  <nav class="navbar navbar-light bg-white navbar-expand-lg border-bottom">
    <div class="container">
      <a class="navbar-brand" href="/"><strong>Vue</strong>图片上传</a>
       
         <div id="search-form"></div>
    </div>
  </nav>
</template>
<script setup>


</script>

<style>
</style>

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
           <SortToggler @sort-change="hanleSortChange($event)"/>
        </div>
        <teleport to="#search-form">
                <SearchForm v-model="query.q"/>
        </teleport>
        <FilesList :files="files"/>

    </div>

</template>
<script setup>
//http://localhost:3031/files?_sort=name&_order=desc 倒序
//http://localhost:3031/files?_sort=name&_order=asc 正序
import SearchForm from '../components/SearchForm.vue';
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import SortToggler from '../components/SortToggler.vue';
import axios from 'axios'

import { ref,onMounted,reactive,watchEffect,watch} from 'vue';


const files=ref([]);
//修改query值 实现倒序正序
const query =reactive({
    _sort:"name",
    _order:"asc",
     q:"",
})
//平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。
//URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据

watchEffect(
   async ()=>{
    //    query.q=props.q;
   const {data}=await axios.get(
`http://localhost:3031/files?${new URLSearchParams(query)} `);

   files.value=data;
}
);

// watch(()=>query._order,
//    async ()=>{
//        console.log(`http://localhost:3031/files?${new URLSearchParams(query)} `)
//    const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);
//     console.log(data)
//    files.value=data;
// },{immediate:true}
// );



const hanleSortChange =(payload)=>{
    console.log(payload);
 
    query._sort=payload.column;
    query._order=payload.order;  
}


</script>

<style>
</style>