vue3 路由、组件传值、生命周期

vue3.0项目基础语法（一）指令绑定

一、路由

1、安装

新建项目时若选择了路由，会自动在创建时就安装配置好，参考：新建一个vue3.0项目

若未安装，则运行命令：npm install vue-router@4  ，参考：vue-router官方文档

2、配置

main.js中引入了router   (新建项目时选择了路由，这些文件都会自动生成好)

router的具体配置

 3、应用

router-link相当于a标签，实现页面跳转；router-view是路由出口，路由匹配到的组件展现在这里

二、组件传值

                                        此图引自：传值汇总

1、父组件  ===》 子组件

父组件传值

<template>
  <div>
    <!-- 3.使用子组件，标签的格式就可以 -->
    <!-- 4.给子组件传值，content 为子组件声明的变量，name 为父组件里 data 声明的变量 -->
    <HelloWorld :content="name" />
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue' // 1.导入子组件

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data () {
    return {
      name: '你好，欢迎你干洋芋果果！'
    }
  }
}
</script>

子组件接收

<template>
  <div>
    <!-- 2.使用父组件里传来的值 -->
    <div>{{ content }}</div>
  </div>
</template>

<script>
export default {
  // 接受父组件里传来的值，在 props 里接收
  props: {
    content: String // 期望的是个 String 类型的，但传过来的是个 Number 类型的，控制台会抛出错误，常见的类型有：String（字符串）、Number（数字）、Boolean（布尔值）、Array（数组）、Object（对象）、Function（函数）
  }
}
</script>

结果：

父组件定义的变量name的内容传到了子组件并展示

2、子组件  ===》 父组件

子组件中自定义一个事件，执行该事件时将子组件中的值传递到父组件

子组件传值

<template>
  <div>
    <button @click="sendMsgToParent">改变父组件用户名</button>
  </div>
</template>

<script>
export default {
  // 1.声明从父组件继承来的事件:可以是简单数组， 也可以是对象
  emits: ['changeName'],
  data () {
    return {
      num: 0
    }
  },
  methods: {
    sendMsgToParent () {
      this.$emit('changeName', '张三') // 2.子组件通过this.$emit向主组件传递参数
    }
  }
}
</script>

父组件接收

<template>
  <div>
    <!-- 3.使用子组件，标签的格式就可以 -->
    <!-- 4.调用方法，获取子组件传递来的名称“张三”-->
    <HelloWorld :content="name" @changeName="getName" />
    <h3>当前登录人：{{ userName }}</h3>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue' // 1.导入子组件

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data () {
    return {
      name: '你好，欢迎你干洋芋果果！',
      userName: '洋芋果果'
    }
  },
  methods: {
    getName (data) {
      // 5.将从子组件获取到的“张三”替换掉“洋芋果果”
      this.userName = data
    }
  }
}
</script>

结果：

点击按钮后

3、子组件之间传值

在vue的原型身上添加一个公共的vue实例，一方调用 $emit 接收值的一方调用$on;

具体可参考子组件之间传值

三、生命周期

与vue2.0时期，有所变化；慢慢在运用中理解

其中vue中用的较多的就是setup(),具体可学习vue官网：vue官网setup()的含义和用法

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured