vue3 路由、组件传值、生命周期
一、路由1、安装新建项目时若选择了路由,会自动在创建时就安装配置好,参考:新建一个vue3.0项目若未安装,则运行命令:npm install vue-router@4,参考:vue-router官方文档2、配置main.js中引入了router (新建项目时选择了路由,这些文件都会自动生成好)router的具体配置3、应用router-link相当于a标签,实现页面跳转;router-view是
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
更多推荐
所有评论(0)