在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. nopcommerce

    nopcommerce是国外的一个高质量的开源b2c网站系统,基于EntityFramework4.0和MVC3.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的,基 ...

  2. 在 Azure 中将基础结构自动化工具与虚拟机配合使用

    若要以一致的方式大规模创建和管理 Azure 虚拟机 (VM),通常需要某种形式的自动化. 可以通过许多工具和解决方案来自动完成整个 Azure 基础结构部署和管理生命周期. 本文介绍了一些可以在 A ...

  3. NaviCat SqlServer Windows 10 Update 1803 IM004 - Driver's SQLAllocHandle on SQL_HANDLE_ENV failed

    安装Windows 10 Update 1803后,Navicat连接SqlServer出现以下错误: IM004 - Driver's SQLAllocHandle on SQL_HANDLE_EN ...

  4. python 函数闭包()

    闭包(closure) 当一个函数在内部定义函数,并且内部的函数应用外部函数的参数或者局部变量,当内部函数被当做返回值的时候,相关参数和变量保存在返回函数中,这种结果,叫闭包 example1: de ...

  5. firefox（火狐）和Chrome（google）浏览器清空缓存操作的方法指引

    摘要说明: 1.系统做升级更新,更新了css和js 2.系统更新有,因为缓存问题,有客户反馈新增功能不能使用 3.所以要清空缓存,提供火狐和谷歌浏览器清空缓存的操作指引 4.附:代码层面的清空缓存方案 ...

  6. 读高性能JavaScript编程 第一章

    草草的看完第一章,虽然看的是译文也是感觉涨姿势了, 我来总结一下: 由于 大多数浏览器都是 single process 处理 ui updatas and js execute 于是产生问题: js ...

  7. 一次SQLServer数据库宕机问题

    数据库采用SQL Server 2005版本, 数据库文件约为6G,而LDF日志文件已经高达36G. 服务器开始变的不太稳定 .数据没有成功保存. 打开事件查看器发现很多信息日志 数据库 '' 中的文 ...

  8. Spirng MVC 重定向传递对象

    在 Spring MVC 中我们会经常遇到重定向. @RequestMapping("/order/saveorder.html") public String saveOrder ...

  9. Gold Point Game~~

    黄金点游戏 1. 队友博客链接 GitHub链接 2.过程总结 (1)俩人各自所做工作?对方编程习惯总结(是否遵照代码规范.是否关注算法效率.是否做了代码复审.界面设计是否关注美观实用等等): 这次作 ...

  10. postMessage 消息传递

    点击查看demo 前言 web开发了,除了前台与服务器交换数据,还有可能前台页面间需要进行数据传递,比如窗口间,页面和嵌套的iframe间.这些问题之前都有解决办法,但是现在html5引入的messa ...