Vue3基础+代码语法+例子大全(七)——组件、生命周期

参考官网:​​​​​​Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

九、组件

1、组件基础

当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC)。组件是单独功能模块的封装。

组件一般保存在 components 文件夹内,文件名一般首字母大写。

例如,在 components 文件夹新建一个 Content.vue:

<template>
    <div>
        <h2>Content组件内容</h2>
    </div>
</template>

要在 App.vue 界面引用该组件:

<script>
import Content from './components/Content.vue'
export default {
    data(){
        return{

        }
    },
    components:{
        // 组件的名字:引入的组件
        // Content:Content
        // 可以简写为:
        Content
    }
}
</script>

<template>
    <div>
        <Content></Content>
    </div>
</template>

 

若要将导入的组件暴露给模板,我们需要在 components 选项上注册。这个组件将会以其注册时的名字作为模板中的标签名。

组件是带有名称的可复用的实例。

2、子组件

一个组件内也可以引用其他组件(在下面的例子中,Content.vue 是 Hello.vue 的父组件,Hello.vue 是 Content.vue 的子组件)

在上面代码的基础上,再新建一个 Hello.vue 组件:

<template>
    <div>
        <h2>Hello组件内容</h2>
    </div>
</template>

然后修改 Content.vue :

<template>
    <div>
        <h2>Content组件内容</h2>
        <Hello></Hello>
        <Hello></Hello>
        <Hello></Hello>
    </div>
</template>

<script>
import Hello from './Hello.vue'
export default {
    components:{
        Hello
    }
}
</script>

3、组件数据的存放:data()

data() 让每一个组件对象都返回一个新的对象,不会造成数据污染

例如:App.vue :

<script>
import Content from './components/Content.vue'
export default {
    data(){
        return{

        }
    },
    components:{
        Content
    }
}
</script>

<template>
    <div>
        <Content></Content>
        <Content></Content>
        <Content></Content>
    </div>
</template>
<template>
    <div>
        <h2>Content组件内容</h2>
        <h2>{
  {msg}}</h2>
        <button @click="msg='你好'">改变msg</button>
    </div>
</template>

<script>
import Hello from './Hello.vue'
export default {
    //data() 让每一个组件对象都返回一个新的对象,不会造成数据污染
    data(){
        return{
            msg:"helloworld"
        }
    }
}
</script>

点击按钮,只改变对应的 msg 的值:

,  

 4、父传子通过prop传递

互为父子组件的两个组件,子组件是无法获得父组件里的数据的。获取父组件、子组件的数据,vue 有自己的方法。

 Props 是一种特别的 attributes,你可以在组件上声明注册。要传递给博客文章组件一个标题,我们必须在组件的 props 列表上声明它。这里要用到 props 选项:

(1)以字符串数组列出的prop

例如:父组件:

<template>
    <div>
        <!-- :message 动态传值        aaa 静态传值 -->
        <Hello :message='msg' aaa='123'></Hello>
    </div>
</template>

<script>
import Hello from './Hello.vue'
export default {
    data(){
        return
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3和TypeScript(TS)是开发Web应用程序的常用技术栈之一。在Vue3中,通过TypeScript可以提供更强大的类型检查和代码提示功能,同时提高了代码的可读性和可维护性。 Vue3中的生命周期Vue2中的生命周期类似,但也有一些新的变化。下面是Vue3中的生命周期: 1. beforeCreate(在创建Vue实例之前):在这个阶段,Vue实例的数据对象和方法还没有初始化。 2. created(已创建Vue实例):在这个阶段,Vue实例的数据对象和方法已经被初始化,但尚未挂载到DOM中。 3. beforeMount(在挂载之前):在这个阶段,Vue实例已经准备好进行挂载,但尚未开始挂载。 4. mounted(已挂载):在这个阶段,Vue实例已经挂载到DOM中,并开始渲染。 5. beforeUpdate(在更新之前):在这个阶段,Vue实例的数据发生改变,但尚未更新到DOM中。 6. updated(已更新):在这个阶段,Vue实例的数据已经更新到DOM中,并重新渲染。 7. beforeUnmount(在卸载之前):在这个阶段,Vue实例即将被销毁,但尚未从DOM中卸载。 8. unmounted(已卸载):在这个阶段,Vue实例已经从DOM中卸载,并被销毁。 除了上述生命周期钩子函数之外,Vue3还引入了一些新的特性,例如: 1. setup函数:替代了Vue2中的beforeCreate和created钩子函数,用于初始化Vue实例的数据、方法和计算属性。 2. onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted函数:分别替代了Vue2中的beforeMount、mounted、beforeUpdate、updated和beforeDestroy钩子函数,用于在对应的生命周期阶段执行特定的逻辑。 总的来说,在Vue3中使用TypeScript可以更好地进行类型检查和代码提示,同时生命周期的使用方式和Vue2有一些变化,如引入了setup函数和新的生命周期钩子函数。通过合理使用这些生命周期函数和TypeScript的特性,可以更好地进行Vue3和TypeScript的开发。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值