【Vue】props与$emit的简单理解

Vue组件

组件是Vue中不可或缺的一个功能，它可以将一个页面划分为多个独立的内部组件，方便代码的管理。

定义组件

<body><div id="App"><bcomp></bcomp></div><script>const app = Vue.createApp({})const buttonComponent = {// 组件的HTML渲染模板template: `<div><button>按钮</button></div>`}app.component('bcomp', buttonComponent) // 将Component组件绑定到应用实例中，并取别名compapp.mount('#App') // 将app应用实例绑定到id=App的HTML元素上</script>
</body>

这是一个最简单的组件，buttonComponent的作用就是在页面中渲染出一个按钮。
app.component()函数可以将buttonComponent组件绑定到app实例中

渲染结果

在这里插入图片描述

Props选项

props定义的属性是提供给外部进行设置使用的

定义props属性

<body><div id="App"><bcomp button-title="按钮1"></bcomp></div><script>const app = Vue.createApp({})const buttonComponent = {// 定义外部属性props: ['buttonTitle'],// 组件的HTML渲染模板template: `<div><button>{{ buttonTitle }}</button></div>`}app.component('bcomp', buttonComponent) // 将Component组件绑定到应用实例中，并取别名compapp.mount('#App') // 将app应用实例绑定到id=App的HTML元素上</script>
</body>

在这里插入图片描述
可以看出props先从外部获取了属性值，然后将属性值在组件内部进行使用。

渲染结果

在这里插入图片描述

$emit方法

在组件内部可以使用$emit方法来传递事件。
比如现在有两个组件，子组件负责渲染按钮的HTML界面，父组件负责按钮的点击事件。
子组件渲染完按钮后，按钮的点击事件不是自己做而是需要传给父组件去做，这时候就需要用到$emit方法了。
假如我们的任务是：点击按钮后需要在控制台输出一个"emit"。

$emit简单使用

<body><div id="App"><bcomp button-title="按钮1" @click-to-log="log"></bcomp></div><script>const app = Vue.createApp({methods: {// log函数log() {console.log('emit')}},})const buttonComponent = {// 定义外部属性props: ['buttonTitle'],// 组件的HTML渲染模板template: `<div><button @click="$emit('clickToLog')">{{ buttonTitle }}</button></div>`}app.component('bcomp', buttonComponent) // 将Component组件绑定到应用实例中，并取别名compapp.mount('#App') // 将app应用实例绑定到id=App的HTML元素上</script>
</body>

在这里，buttonComponent组件中在按钮渲染处定义了一个click事件，但是click事件不是自己做而是父组件做，因此它将click事件重命名为click-to-log传递出去(正常情况一般是@click="$emit('click')"，即不修改名称，这里为了防止搞混专门把命名改成都不一样的了)。
父组件app收到后看到click-to-log事件需要一个控制台输出函数log，于是在自己的methods中定义了一个log函数在控制台输出"emit"。
在这里插入图片描述