一、Vue3组件的传值

1、传值

App.vue文件 <template><div>欧阳克</div><OyDivstyle=“color:red;“size=“2”type=“wrning”>欧阳组件</OyDiv><Ztp></Ztp></template><script>import OyDiv from “./components/OyDiv.vue”;export default{ // data:数据; methods:js计算属性等; // components:组件; 使用组件,传值 components:{ OyDiv },}OyDi搭建商城点我wcqh.cnv.vue组件文件（组件文件）<template><div>{{ size }}</div><div>{{ type }}</div></template><script>exportdefault({// 1.组件里面的api都是和页面文件一样的// props:配置项,是接收传值的// props:接收的值,直接跟data里的数据一样使用 props:[size,type]})</script>

2、可以多个组件

App.vue文件 <template><div>欧阳克</div><!– <oy-div style=”color:red;” size=”2″>欧阳组件</oy-div><OyDiv搭建商城点我wcqh.cn style=”color:red;” size=”2″>欧阳组件</OyDiv> –><OyDivstyle=“color:red;“size=“2”type=“wrning”>欧阳组件</OyDiv><Ztp></Ztp></template> Ztp.vue文件（组件文件） <template><div>朱天蓬组件</div></template>

3、组件引入多个子组件

App.vue组件文件 <template><div>欧阳克</div><OyDivstyle=“color:red;“size=“2”type=“wrning”>欧阳组件</OyDiv></template><script>i搭建商城点我wcqh.cnmport OyDiv from “./components/OyDiv.vue”;export default{ // data:数据; methods:js计算属性等; // components:组件; 使用组件,传值 components:{ OyDiv },} Ztp.vue子组件 <template><div>{{ size }}</div><div>{{ type }}</div><Ztp></Ztp></template><script>importZtp from “./Ztp.vue”;exportdefault({// 1.组件里面的api都是和页面文件一样的// props:配置项,是接搭建商城点我wcqh.cn收传值的// props:接收的值,直接跟data里的数据一样使用 props:[size,type], components:{Ztp}})</script>

4、传值的配置项

app.vue文件 <template><div>欧阳克</div><OyDivstyle=“color:red;“ :arr=“arr_v”types=“wrning”>欧阳组件</OyDiv></template><script>import OyDiv from “./components/OyDiv.vue”;export default{ // data:数据; methods:js计算属性等; // components搭建商城点我wcqh.cn:组件; 使用组件,传值 components:{ OyDiv }, data(){ return { arr_v:[ “欧阳克”, “朱天蓬” ], } },} OyDiv.vue文件 <template><div>{{ size }}</div><div>{{ types }}</div><div>{{ arr }}</div><Ztp></Ztp></template><script>importZtp from “./Ztp.vue”;exportdefault({// 1.组件里面的api都是和页面文件一样的// props:配置项,是接收传值的// props:接收的值,直接跟data里的数据一样使用props搭建商城点我wcqh.cn:{ size:{ type :Number, required:true,default:0}, types:{ type :String}, arr :{ type :Array}}, components:{Ztp}})</script>

5、判断值赋予样式

OyButton.vue文件 <template> {{ size }} {{ type }}<buttonv-if=“type==”class=“bottom”>按钮</button><buttonv-else-if=“type==primary”class=“bottom oy-button–primary”>按钮</button></template><sc搭建商城点我wcqh.cnript>exportdefault({ props:{ size:{}, type:{},},})</script><stylescoped>button { xxx }.oy-button–primary { xxx }<style>

App.vue文件 <template><div>欧阳克</div><!–<OyDiv style=”color:red;” :arr=”arr_v” types=”wrning”>欧阳组件</OyDiv>–><OyButtonsize=“large”type=“”></OyButton></template><script>importOyDiv from “./搭建商城点我wcqh.cncomponents/OyDiv.vue”;importOyButton from “./components/OyButton.vue”;exportdefault{// data:数据; methods:js计算属性等; // components:组件; 使用组件,传值 components:{OyDiv,OyButton},}</script>

<OyButtonsize=“large”type=“primary”></OyButton>

@style scoped

scoped：可以穿透到其他文件使用，或者本文件单独使用

6、插槽的使用方式：

单个插槽

App.vue文件

<template><div>欧阳搭建商城点我wcqh.cn克</div><!–插槽–><OyButtonsize=“large”type=“primary”>提交</OyButton></template>

OnButton.vue文件

<template> {{ size }} {{ type }}<buttonclass=“bottom”><!– 添加一个插槽 –><!– 插槽可以在组件的任意位置 –><slot></slot></button><buttonv-if=“type==”class=“bottom”>按钮</button><buttonv-else-if=“type==primary”class=“bottom oy-butto搭建商城点我wcqh.cnn–primary”>按钮</button></template>

多个插槽

App.vue文件

<!–插槽–><OyButtonsize=“large”type=“primary”> 提交<spanstyle=“color:red“>确定</span><!– 用标签来使用有名字的插槽 –><templatev-slot:one><divstyle=“color:greenyellow“>确定</div></template><!– 语法糖 # –><template #two><divstyle=“color:blue“>确定</div></template></OyButton>OnB搭建商城点我wcqh.cnutton.vue文件<template> {{ size }} {{ type }}<buttonclass=“bottom”><!– 添加一个插槽 –><!– 插槽可以在组件的任意位置 –><slot></slot></button><slotname=“one”></slot><slotname=“two”></slot><buttonv-if=“type==”class=“bottom”>按钮</button><buttonv-else-if=“type==primary”class=“bottom oy-button–primary”>按钮</button></template搭建商城点我wcqh.cn>

7、子组件调用父组件方法

App.vue文件 <template><OyJs></OyJs></template><script>importOyJs from “./components/OyJs.vue”;exportdefault{ components:{OyJs}, data(){return{}}, methods :{ fun(e){ console.log(父组件方法); console.log(e);}},}</script> OyJs.vue文件 <template><div>OyJs</div><div>{{ OyJs_fun() }}</div><button @click=“OyJs_fun(搭建商城点我wcqh.cn1)”>按钮</button></template><script>exportdefault({ props:{}, methods:{OyJs_fun(e){ console.log(OyJs方法);// 使用全局属性// $parent 上一级,父级方法this.$parent.fun(e);// 最顶层，根目录this.$root.fun(e);}}})</script>

this.$parent.fun： $parent 上一级，父级方法

this.$root.fun： $root 最顶层，根目录

8、组件生命周期

声明周期 作用 befor搭建商城点我wcqh.cneCreate 在创建组件之前调用 created 组件创建完成调用 beforeMount 模板挂载之前调用 mounted 模板挂载完成调用 beforeUpdate 改变内容之前调用 update 改变内容之后调用 beforeUnmout 组件销毁之前调用搭建商城点我wcqh.cn unmounted 组件销毁之后调用

二、Vue3路由

路由文件路径：src/router/index.js

视图文件路径：src/view/XxXxx.vue

1、新增路由：

1.1 创建视图文件：1.2 新建路由： importMyViewfrom../views/MyView.vue routes:[{ path:/my, name:my, component:MyView},]

2、单页面跳转

<router-linkto=“/”>首页</router-link> |<router-linkto=“/about”>帮助页面</router-link> |<ro搭建商城点我wcqh.cnuter-linkto=“/my”>个人中心</router-link>

在页面内刷新跳转新页面，不用怎个页面刷新

3、另外一个router跳转方法

app.vue文件 <el-button @click=“go_url()”>跳转</el-button><script> methods :{}, go_url(){// 路由有个全局变量// 用选项api,都是this. 可以访问全局变量// this.$route 获取页面信息this.$router.push(/my);}},}</script>

路由跳转不支持跳转至外网，如需要可用a标签

this.$router.push：是跳转到新页面

this.$rou搭建商城点我wcqh.cnte：是获取页面信息

自行配置跳转参数

go_url(){// 路由有个全局变量// 用选项api,都是this. 可以访问全局变量// this.$route 获取页面信息//this.$router.push(/my); console.log(this.$route);// 用js跳转,增加传值this.$router.push({ path :/my, query :{ id:188, oid:288}});

4、子路由

4.1 创建视图文件：

4.2 新建路由：

修改路由文件 index.js

子路由的path,不能在前面加反斜杠/

importMyOrderViewfrom../views/MyOrderVie搭建商城点我wcqh.cnw.vueimportMyConfigViewfrom../views/MyConfigView.vueconst router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes:[{ path:/my, name:my, component:MyView,// 子路由的path,不能在前面加反斜杠/ children:[{ path:order, name:my_order, component:MyOrderView,},{ path:config, name:my_config, component:MyConfig搭建商城点我wcqh.cnView},]},]}) 修改附近视图文件 MyView.vue <template><div><h1>这是个人中心页面</h1><router-linkto=“/my/order”>订单页面</router-link> |<router-linkto=“/my/config”>配置页面</router-link><router-view></router-view></div></template> 增加子路由文件：MyConfigView.vue、MyOrderView.vue <template><div><h1>这是个人中心配置页面</h1></div></template><template>搭建商城点我wcqh.cn<div><h1>这是个人中心订单页面</h1></div></template>