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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值