在VUE中，数据从父组件流向（传递）给子组件，只能单向绑定，在子组件内部不应该修改父组件传递过来的数据。

如果必须修改子组件中接收的数据，可以：

1. 作为data中局部数据，进行改动

2. 作为子组件中的computed树属性

例如，下面例子中，虽然可以实现count加1，但是会报错。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

    <title>组件</title>

    <style>

    </style>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <custom-component v-bind:message="count"></custom-component>

    </div>

    <script>

        Vue.component("custom-component",{

            props: ['message'],

            template:`

                <div>

                    <h2>自定义组件</h2>

                    {{message}}

                    <input type="button" value="加一" v-on:click = "changeMssage" />

                </div> `,

            methods: {

                changeMssage(){

                    this.message++;

                }

            }

        })

        new Vue({

            el:"#app",

            data(){

                return {count: 0}

            }

        })

    </script>

</body>

</html>

需要对上面进行改动如下：

<script>

	Vue.component("custom-component",{

		props: ['message'],

		data(){

			return {

				plus: this.message   // data必须以函数形式返回数据

			}

		},

		template:`

			<div>

				<h2>自定义组件</h2>

				{{plus}}

				<input type="button" value="加一" v-on:click = "changeMssage" />

			</div> `,

		methods: {

			changeMssage(){

				this.plus++;

			}

		}

	})

	new Vue({

		el:"#app",

		data(){

			return {count: 0}

		}

	})

</script>

vue中的单项数据流的更多相关文章

  1. Vue组件中的单项数据流

    当子组件中的input v-model 父组件的值时不能直接绑定props的值要使用计算属性,向下面的写法,因为props是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...

  2. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  3. vue中的双向数据绑定详解

    前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...

  4. Vue_(组件通讯)单项数据流

    Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...

  5. vue-父子组件之传值和单项数据流问题

    前言 我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的.那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 正文 1.父组件传值给子组件 < ...

  6. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  7. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  8. vue中关于prop

    组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop 1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的 ...

  9. Vue中v-on的指令以及一些其他指令

    1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...

随机推荐

  1. go语言练习：sha256、sha512哈希算法

    package main import ( "fmt" "crypto/sha256") func main() { str:="test hash. ...

  2. Prometheus Node_exporter 之 System Detail

    System Detail 1. Context Switches / Interrupts type: GraphUnit: shortLabel: CounterContext switches ...

  3. mysql Alter table设置default的问题，是bug么？

    不用不知道,用了没用? 昨天在线上创建了一个表,其中有两个列是timestamp类型的,创建语句假设是这样的: create table timetest(id int, createtime tim ...

  4. Lorem 占位符

    Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义. 为什么叫lorem ipsum text呢? 是因为lorem ipsum是古罗马西塞罗谚语 ...

  5. 转：C#综合揭秘——细说多线程（下）

    原文地址:http://www.cnblogs.com/leslies2/archive/2012/02/08/2320914.html 引言 本文主要从线程的基础用法,CLR线程池当中工作者线程与I ...

  6. NXlog配置

    NXlog文档: http://nxlog.org/docs/nxlog-ce/nxlog-reference-manual.html https://nxlog.org/documentation/ ...

  7. 35_张孝祥Java高新技术_为注解增加各种属性

    注解的作用之所以那么强大,就是因为它有属性 注解很像接口,属性很像方法.   什么是注解的属性 一个注解相当于一个胸牌,如果你胸前贴了胸牌,就是传智播客的学生,否则,就不是.如果还想区分出事传智播客 ...

  8. linux 下获取文件最后几行

    在Linux下,获取文件倒数几行的命令是: tail -n 10 your_filename     #获取倒数10行

  9. [日常] HEOI 2019 退役记

    HEOI 2019 退役记 先开坑 坐等AFO 啥时候想起来就更一点(咕咕咕) Day 0 早上打了个LCT, 打完一遍过编译一遍AC...(看来不考这玩意了) 然后进行了一些精神文明建设活动奶了一口 ...

  10. DevExpress10、RichEditControl

    1.概述 传统.NET界面也有一个RichTextBox控件,一个富文本控件,可存储图片文字,有自己的文件格式RTF. 在DevExpress控件组里面也有一个同等的控件,RichEditContro ...