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{