在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. C#多线程的用法8-线程间的协作AutoResetEvent

    AutoResetEvent自动重置事件,与ManualResetEvent是相对的而言.它同样用于线程间同步,请对照<C#多线程的用法7-线程间的协作ManualResetEvent>进 ...

  2. python 之__new__

    注意: 继承自object的新式类才有__new__方法 类中的__init__方法依赖__new__方法的正确返回,init中的self就是__new__返回的实例 __new__至少要有一个参数c ...

  3. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  4. [Linux|DBA]运维三十六计

    这里是腾讯两位大神梁定安.周小军总记得运维DBA三十六计--

  5. 【转】Java学习---Java中volatile关键字实现原理

    [原文]https://www.toutiao.com/i6592879392400081412/ 前言 我们知道volatile关键字的作用是保证变量在多线程之间的可见性,它是java.util.c ...

  6. Symbol Tables

    符号表 符号表是键值对的集合,支持给定键查找值的操作,有很多应用: API put() 和 get() 是最基础的两个操作,为了保证代码的一致性,简洁性和实用性,先说下具体实现中的几个设计选择. 泛型 ...

  7. Sublime2 DocBlocker插件在自动补全注释时输出自定义作者和当前时间等信息

    Sublime在进行前端开发时非常棒,当然也少不了众多的插件支持,DocBlocker是在Sublime平台上开发一款自动补全代码插件,支持JavaScript (including ES6), PH ...

  8. BZOJ 1934 善意的投票

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1934 题目大意: 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问 ...

  9. Git branch -r 无法获取远程分支，ui可以看见分支但是git 命令无法查看解决方案

    zhc@hongchangfirst$ git checkout -b hongchangfirst origin/hongchangfirst 出现: fatal: Cannot update pa ...

  10. PHP生成excel表格文件并下载

    本文引自网络,仅供自己学习之用. 利用php导出excel我们大多会直接生成.xls文件,这种方便快捷. function createtable($list,$filename){ header(& ...