码云 Vue3教程 2021-06-11

28. [组件]Vue组件中的单项数据流机制

AI 概述

编写一个计数器单向数据流概念为什么要有单向数据流机制这节我们继续讲组件传递参数时的单项数据流。它是 Vue 编写组件的一个重要机制，保证了组件的独立性。作为一个程序员，我们有必要知道、了解和精通单项数据流的概念和使用。编写一个计数器为了更好的说明什么是单项数据流，在文章开始前，我们...

文章目录隐藏

编写一个计数器
单向数据流概念
为什么要有单向数据流机制

这节我们继续讲组件传递参数时的单项数据流。它是 Vue 编写组件的一个重要机制，保证了组件的独立性。作为一个程序员，我们有必要知道、了解和精通单项数据流的概念和使用。

编写一个计数器

为了更好的说明什么是单项数据流，在文章开始前，我们需要用以前学的知识，编写一个计数器功能。

新建一个Demo28.html，只有最基本的代码结构，你也可以复制下面这段代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo05</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        template: `
            <h2>mybj123.com</h2>
        `
    })

    const vm = app.mount("#app")
</script>
</html>

然后编写一个全局组件，全局组件接受一个参数counter，代码如下。

app.component('Counter', {
    props: ['counter'],
    template: `
        {{counter}}<button @click="counter+=1">增加数量</button>
    `
})

编写好全局组件Counter后，就可以在父组件中使用了，因为 Counter 是传递到子组件里的，所以要在数据项data中进行声明。

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    template: `
        <h2>mybj123.com</h2>
        <counter :counter="counter"/>
    `
})

一切好像都很正常，但是当你在浏览器中预览的时候，你会发现点击按钮根本不起作用。这就是单向数据流机制限制的结果。

单向数据流概念

什么是单向数据流？官方的解释还是比较晦涩难懂的。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

我第一次读这段文字时，也没有搞清楚它要说的到底是什么，但是经过学习和项目后，其实单项数据流的概念就特别好理解。可以简单的说：数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父组件传递过来的数据。

这也就是为什么，我们上面写的程序不能使用的原因了。那如何修改这个程序，让其好用呢，方法很简单，在组件内的数据项中声明一个变量，把父组件传递过来的变量赋值给内部变量，然后就可以随意修改了。

app.component('Counter', {
    props: ['counter'],
    data() {
        return {
            newCounter: this.counter
        }
    },
    template: `
        {{newCounter}}<button @click="this.newCounter+=1">增加数量</button>
    `
})

这样就可以进行修改了。当我们通过程序，更好的理解了什么是单项数据流后，我们再来总结一下。单向数据流就是父组件可以向子组件传递数据，但是子组件不能修改数据。

为什么要有单向数据流机制

单项数据流的最终目的，就是为了降低组件的耦合度和独立性。比如现在页面上同时调用了三个<counter/>组件，没有单项数据流的机制，很容易变成一个组件数值变化，其他组件的数值也跟着变化的现象。让页面组件的数据耦合在一起，没办法独立使用。

template: `
    <h2>JSPang.com</h2>
    <counter :counter="counter"/>
    <counter :counter="counter"/>
    <counter :counter="counter"/>
`

而本文主要学习的目的就是搞清楚什么是组件中的单项数据流的概念。

以上关于28. [组件]Vue组件中的单项数据流机制的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 28. [组件]Vue组件中的单项数据流机制

码云 SVIP

分享到：

编写一个计数器

单向数据流概念

为什么要有单向数据流机制

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复