vue - 自定义组件

参数设置

自定义组件的时候，需要告诉别人，调用我们的组件，需要传递什么参数。

• 使用 props（Property的缩写）为组件设置传值参数。
• 参数可以指定类型，分为：String、Number、Boolean、Function、Object、Array，
• 除此之外，还可以指定是否必传，设置默认值。

事件回调

比如说：我们封装的是很漂亮的按钮，用户点击的时候，要触发父页面的事件，要怎么办？

这时候，就要使用下面两个语法了：

• 使用 $emit(eventName) 触发事件，子页面触发父页面的事件
• 使用 $on(eventName) 事件的侦听事件，如果触发了$emit(eventName)，之后就会接着触发$on(eventName)

（如果一开始不想记这么多，props 包含 Function 类型，可以把点击事件作为参数传给组件。）

自定义组件Demo

<template>
    <el-button @click="click">{{label}}</el-button>
</template>

<script>
/* eslint-disable */

export default {
    name: "Test",
    props: {
        // 父组件需要传递的参数，默认值是 click
        label: {type: String, default: 'click'}
    },
    methods: {
        click: function (){
            // 点击按钮的时候，调用父组件的一个函数
            this.$emit('onClick', {name: xiaoming});
        }
    }

}
</script>

父组件

<template>
    <!-- 调用子组件，设置好参数和事件  -->
    <test label="按钮" @onClick="onClick"></test>
</template>

<script>
/* eslint-disable */
// 导入自定义组件
import Test from "./Test";

export default {
    name: "Test2",
    // 引用子组件
    components: {Test},
    methods: {
        // 声明一个函数，传递给子组件
        onClick: function (val) {
            console.log(val);
        }
    }
}
</script>