37、Vue.js 全面介绍

对方正在偷人346

于 2025-07-23 10:15:42 发布

阅读量7

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript实战：构建现代Web应用文章标签： Vue.js 组件内部状态事件监听

本文链接：https://blog.csdn.net/grpc6streamer/article/details/150105334

TypeScript实战：构建现代Web应用专栏收录该内容

54 篇文章 ¥399.00 ¥499.90

订阅专栏

超级会员免费看

Vue.js 全面介绍

1. 组件内部状态

组件可以拥有自己的内部状态或数据。例如：

props: ['someInput'],
data: function() {
    return {
        foo: this.someInput,
    };
}

在这个例子中， someInput 被传入并用于组件内部状态的 foo 属性。需要定义这个函数，以确保状态保持内部性。同时，组件不应尝试改变其属性，若需要改变属性，可以将其添加到组件的 data 中，或添加到 computed 对象中。

2. 监听子组件触发的事件

使用 v-on 指令监听子组件发出的事件，并且可以传递数据。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo task list listen</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .todoTask

了解本专栏

超级会员免费看