一、Vue3组件的传值

1、传值

• App.vue文件

<template>
  <div>欧阳克</div>
  <OyDiv style="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
  },
}

• OyDiv.vue组件文件（组件文件）

<template>
    <div>{{ size }}</div>
    <div>{{ type }}</div>
</template>
<script>
export default({
    // 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 style="color:red;" size="2">欧阳组件</OyDiv>
  -->  
  <OyDiv style="color:red;" size="2" type="wrning">欧阳组件</OyDiv>
  <Ztp></Ztp>
</template>

• Ztp.vue文件（组件文件）

<template>
    <div>朱天蓬组件</div>
</template>

3、组件引入多个子组件

• App.vue组件文件

<template>
  <div>欧阳克</div>
  <OyDiv style="color:red;" size="2" type="wrning">欧阳组件</OyDiv>
</template>
<script>
import 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>
import Ztp from "./Ztp.vue";
export default({
    // 1.组件里面的api都是和页面文件一样的
    // props:配置项,是接收传值的
    // props:接收的值,直接跟data里的数据一样使用
    props: ['size', 'type'],
    components: {
        Ztp
    }
})
</script>

4、传值的配置项

• app.vue文件

<template>
  <div>欧阳克</div>
  <OyDiv style="color:red;" :arr="arr_v"  types="wrning">欧阳组件</OyDiv>
</template>
<script>
import OyDiv from "./components/OyDiv.vue";
export default{
  // data:数据; methods:js计算属性等; 
  // components:组件; 使用组件,传值
  components:{
    OyDiv
  },
  data(){
    return {
      arr_v:[
        "欧阳克",
        "朱天蓬"
      ],
    }
  },
}

• OyDiv.vue文件

<template>
    <div>{{ size }}</div>
    <div>{{ types }}</div>
    <div>{{ arr }}</div>
    <Ztp></Ztp>
</template>
<script>
import Ztp from "./Ztp.vue";
export default({
    // 1.组件里面的api都是和页面文件一样的
    // props:配置项,是接收传值的
    // props:接收的值,直接跟data里的数据一样使用
    props: {
        size: {
            type : Number,
            required: true,
            default: 0
        },
        types: {
            type : String
        },
        arr : {
            type : Array
        }
    },
    components: {
        Ztp
    }
})
</script>

5、判断值赋予样式

• OyButton.vue文件

<template>
    {{ size }}
    {{ type }}
    <button v-if="type==''" class="bottom">按钮</button>
    <button v-else-if="type=='primary'" class="bottom oy-button--primary">按钮</button>
</template>
<script>
export default({
    props: {
        size: {
        },
        type: {
        },
    },
})
</script>
<style scoped>
button { xxx }
.oy-button--primary { xxx }
<style>

• App.vue文件

<template>
  <div>欧阳克</div>
  <!--<OyDiv style="color:red;" :arr="arr_v"  types="wrning">欧阳组件</OyDiv>-->
  <OyButton size="large" type=""></OyButton>
</template>
<script>
import OyDiv from "./components/OyDiv.vue";
import OyButton from "./components/OyButton.vue";
export default{
  // data:数据; methods:js计算属性等; 
  // components:组件; 使用组件,传值
  components:{
    OyDiv,
    OyButton
  },
}
</script>

<OyButton size="large" type="primary"></OyButton>

@style scoped

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

6、插槽的使用方式：

• 单个插槽

• App.vue文件

  <template>
  <div>欧阳克</div>
  <!--插槽-->
  <OyButton size="large" type="primary">提交</OyButton>
  </template>

• OnButton.vue文件

<template>
    {{ size }}
    {{ type }}
    <button class="bottom">
        <!-- 添加一个插槽 -->
        <!-- 插槽可以在组件的任意位置 -->
        <slot></slot>
    </button>
    <button v-if="type==''" class="bottom">按钮</button>
    <button v-else-if="type=='primary'" class="bottom oy-button--primary">按钮</button>
</template>

• 多个插槽

• App.vue文件

  <!--插槽-->
  <OyButton size="large" type="primary">
    提交
    <span style="color:red">确定</span>
    <!-- 用标签来使用有名字的插槽 -->
    <template v-slot:one>
      <div style="color:greenyellow">确定</div>
    </template>
    <!-- 语法糖 # -->
    <template #two>
      <div style="color:blue">确定</div>
    </template>
  </OyButton>

• OnButton.vue文件

<template>
    {{ size }}
    {{ type }}
    <button class="bottom">
        <!-- 添加一个插槽 -->
        <!-- 插槽可以在组件的任意位置 -->
        <slot></slot>
    </button>
        <slot name="one"></slot>
        <slot name="two"></slot>
    <button v-if="type==''" class="bottom">按钮</button>
    <button v-else-if="type=='primary'" class="bottom oy-button--primary">按钮</button>
</template>

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

• App.vue文件

<template>
  <OyJs></OyJs>
</template>
<script>
import OyJs from "./components/OyJs.vue";
export default{
  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(1)">按钮</button>
</template>
<script>
export default({
    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、组件生命周期

二、Vue3路由

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

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

1、新增路由：

• 1.1 创建视图文件：
• 1.2 新建路由：

import MyView from '../views/MyView.vue'
  routes: [
    {
      path: '/my',
      name: 'my',
      component: MyView
    },
  ]

2、单页面跳转

  <router-link to = "/">首页</router-link> |
  <router-link to ="/about">帮助页面</router-link> |
  <router-link to = "/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.$route：是获取页面信息

自行配置跳转参数

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,不能在前面加反斜杠/

import MyOrderView from '../views/MyOrderView.vue'
import MyConfigView from '../views/MyConfigView.vue'
const 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: MyConfigView
        },
      ]
    },
  ]
})

• 修改附近视图文件 MyView.vue

<template>
  <div>
      <h1>这是个人中心页面</h1>
      <router-link to="/my/order">订单页面</router-link> |
      <router-link to="/my/config">配置页面</router-link>
      <router-view></router-view>
  </div>
</template>

• 增加子路由文件：MyConfigView.vue、MyOrderView.vue

<template>
    <div><h1>这是个人中心配置页面</h1></div>
</template>

<template>
    <div><h1>这是个人中心订单页面</h1></div>
</template>

批改老师：PHPz

批改状态：合格

老师批语：