vue3使用文档总结ing

• 动态绑定类名

<p :class="[index==currentIndex?'active-style':'']">{{item}}</p>
// 类名拼接
<span v-if="index<3" :class="'pmpic'+(index+1)"></span>
// 一个静态类 一个需要动态绑定
 <div class="header" :class="{'headerscroll':state.iScoll}">

• router-link 选中的样式一直不显示？

// css
// 给router-link 的孩子设置默认颜色会覆盖路由动态的类的颜色所以不要设置

.active{
    color:@primary;
}

			<router-link  active-class="active" to="/">
                <van-icon name="wap-home-o" />
                <p>首页</p>
            </router-link>
            <router-link  active-class="active" to="home3">
                <van-icon name="shopping-cart-o" />
                <p>购物车</p>
            </router-link>
            <router-link  active-class="active" to="home4" >
                <van-icon name="manager-o" />
                <p>我的</p>
            </router-link>

• router-index.js 路由引入方式
  1.import 头部引入

 import Home from '../views/Home.vue'

2.懒加载方式引入，只有访问该页面才加载出来

{
      path: '/',
      name: 'home',
      // redirect:'/home',
      component: () => import('../views/Home.vue') //懒加载方式引入当这个路由被访问时才加载
    },

• 后端请求

const onClickBran = (async(id)=>{
    try {
        await request.post(requestapi,{});?//如果这一行出错直接跳到catch
    } catch (e) {
        Notice.warning({title: e,duration:300000})
    }
   
  
})

const onGetBrandList = (async()=>{
  
    //   Promise.all([
    //     await request.get(getBrandList,'agentId')
    // ]).then(result=>{
    
    //     brandData.list = result[0].list;
    //     brandData.islogin=true;
    // }).catch((e)=>{
    //     console.log('errrrr')
    //     Notice.warning({title: e,})
    // })

    try {
        const resData = await request.get(getBrandList,'agentId');
        brandData.list = resData.list;
        brandData.islogin=true;
    } catch (e) {
        Notice.warning({title: e,})
    }
})

• Promise.all
  Promise.all([promise1,promise2,promise3…]).then(result=>{}).catch()
  用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise
  接收一个数组作为参数，数组里面可以是Promise对象，也可以是别的值；只有Promise会等待状态改变
  result是参数promise数组中所有promise结果组合成的数组
  只有当所有子promise都完成，并且结果都是resolve，才走then
  只要有一个子promise结果为reject，就走catch，返回值是第一个失败的子promise的结果
• proxy对象好像不能顺利遍历里面包裹的数组对象?

JSON.parse(JSON.stringify(a));

• proxy对象好像不能顺利遍历里面包裹的对象?

JSON.parse(JSON.stringify(a))

父子组件交互

• 父组件给子组件传参数
  父组件在调用子组件时通过v-bind:绑定数值传给子组件，然后子组件内通过defineProps获取父组件传来的参数

// father.vue
<temlpate>
	<div>
		<div>我是父组件</div>
		<Son  v-bind:fatherMsg="fatherMsgggg" />
	</div>
	
</template>
<script setup>
import {ref} from "vue";
import Son from './Son.vue';
let fatherMsgggg = ref('我是父组件传来的参数');
</script>

// son.vue
<temlpate>
	<div>
		<div>我是子组件</div>
		<div>父组件给我传的参数{{props.fatherMsg}}</div>
	</div>
</template>
<script setup>
import {ref} from "vue";
const props = defineProps({
  fatherMsg:String
})

</script>

• 阻止事件冒泡：点击父级不触发子级事件，点击子集不处发父级事件,给俩点击事件的父亲添加空白点击事件阻止冒泡@click.stop=""

<Modal
        v-model="modalVal"
        title="修改"
        @on-ok="onOk"
        @on-cancel="cancel"
        @click.stop="onHiddenInput"
        >            
            <div class="add-tag" @click.stop="">
                    <Button v-if="!form.isInput" type="primary" @click="onShowInput">添加标签</Button>
                    <Input v-else v-model="form.inputVal" autofocus maxlength="10" show-word-limit  style="width:200px" @on-enter="onAddtag"/>
                </div>
    </Modal>

• modal 通信 ：子组件给父级组件通信
  1.关闭事件
  2.确认事件：传参
• vue3全局变量的使用：app.config.globalProperties
  1.作用：添加一个可以在应用内全局使用的property，组件的property在冥冥冲突时具有优先权
  2.定义

//main.js
const app = createApp(App);
/**
 * app.config.globalProperties 是vue3一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
 */
// 全局过滤器:如果地址链接没带http等前缀就拼接上
app.config.globalProperties.$filters = {
  prefix(url) {
    if (url && url.startsWith('http')) {
      return url
    } else {
      url = `http://xxxx${url}`
      return url
    }
  }
}

3.使用：在组件模板中使用

<img :src="$filters.prefix(item.url)" />

4.使用:在组件内部使用getCurrentInstance()

// getCurrentInstance 只能在生命周期里使用，在函数里使用获取不到
const { that } = getCurrentInstance(); // 获取上下文实例，that等同于vue2中的this
onMounted(() => {
      that.prefix();
    });

//当前组件的上下文，只能在开发环境下使用，生产环境下的 ctx 将访问不到，ctx 中包含了组件中由 ref 和 reactive 创建的响应式数据对象，以及 proxy 下的属性
const { ctx } = getCurrentInstance();// 获取上下文，只能在开发环境下获取，无法再生产环境下获取，因为该属性就是用于测试使用


//推荐，但是现在发现有个问题在正式环境里面that获取不到路由和全局挂载对象的，可以用proxy来代替
 const { proxy } = getCurrentInstance(); 
    onMounted(() => {
      proxy.prefix();
      // 调取子组件的 方法
      proxy.$refs.showTankuang.open()

    });

• vue3 proxy代理数据转成普通数据

const ListData = ref([])
// 方法一
JSON.parse(JSON.stringify(ListData.value));

// 方法二使用 toRow 把proxy变成原始数据
import { toRaw } from 'vue'
let olddata = toRaw(ListData.value);
  // 然后就可以遍历了
 olddata.forEach(item=>{

})