Vue 组件使用教程

如果你问我 Vue 的优点是什么，我的回答一定是它强大的组件功能，毫无夸张的说，组件是 Vue 异军突起的根据，是众多开发人员选择它的主要原因。

下面举一个简单案例介绍组件使用。

一、组件嵌套

1. 子组件

我们先新建一个组件 sonPage.vue ，并在该组件内添加一些内容，代码如下：

<template>
    <div>
        <span>我是子组件</span>
    </div>
<template>

2. 父组件

(1) Script代码

在父组件通过 components 对组件进行导入注册。

<script>
// 引入组件
import SonPage from "./sonPage";

export default {
    // 注册组件
    components: {
        SonPage,
    }
}
<script>

(2) HTML代码

在HTML代码中使用注册的组件，代码如下：

<template>
    <div>
        <span>以下为子组件内容</span>

        <!-- 组件使用 -->
        <son-page />
    </div>
<template>

二、组件传参

1. 父传子

(1) 父组件

在 父组件 通过自定义标签属性向子组件传参。

<template>
    <div>
        <span>下述为嵌套子组件</span>

        <son-page brandName="布袋树洞"></son-page>
    </div>
<template>

(2) 子组件

在子组件 script 脚本中通过 props 赋值，如需额外执行获取操作。

export default {
    name: 'sonPage',
    props: {
        // 定义 props 来接收父组件传递的数据
        brandName: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            // 获取传参
            info: this.brandName
        } 
    }
}

2. 子传父

(1) 父组件

在父组件通过自定义函数获取子组件传参。

<template>
    <div>
        <span>下述为嵌套子组件</span>

        <son-page @sonSend="fatherGet"></son-page>
    </div>
<template>

自定义函数方法打印获取的参数，当子组件发送数据时将会执行上述声明的 fatherGet 事件。

<script>
    method: {
        fatherGet(data) {
            // 打印子组件的传参
            console.log(data)
        }
    }
</script>

(2) 子组件

在子组件中通过 $emit 事件向父组件传参。

<template>
    <div>
        <button @click="send">传参</button>
    </div>
<template>

需要注意这里 $emit 第一个参数要和父组件中 @事件名 一致。

<script>
    method: {
        send() {
            // 向父组件传参
            this.$emit('sonSend', '123')
        }
    }
</script>