1、props通信

注意：DOM模板的驼峰命名props要转为短横分割命名。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>Vue</title>

    </head>

    <body>

        <div id="app">

            <my-component message='来自父组件的数据' warning-text="提示信息"></my-component>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            Vue.component('my-component', {

                template: '<div>{{warningText}}：{{message}}</div>',

                props: ['message', 'warningText']

            })

            new Vue({

                el: "#app"

            })

        </script>

    </body>

</html>

传递动态数据（v-bind）：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>Vue</title>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="parentMessage" />

            <my-component :message='parentMessage'></my-component>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            Vue.component('my-component', {

                template: '<div>{{message}}</div>',

                props: ['message']

            })

            new Vue({

                el: "#app",

                data: {

                    parentMessage: ''

                }

            })

        </script>

    </body>

</html>

2、单向数据流

（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>Vue</title>

    </head>

    <body>

        <div id="app">

            <my-component :init-count='1'></my-component>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            Vue.component('my-component', {

                template: '<div>{{initCount}}</div>',

                props: ['initCount'],

                data: function() {

                    return this.initCount

                }

            })

            new Vue({

                el: "#app"

            })

        </script>

    </body>

</html>

（2）使用计算属性

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>Vue</title>

    </head>

    <body>

        <div id="app">

            <my-component :width='100'></my-component>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            Vue.component('my-component', {

                template: '<div :style="style">组件内容</div>',

                props: ['width'],

                computed: {

                    style: function() {

                        return {

                            width: this.width + 'px'

                        }

                    }

                }

            })

            new Vue({

                el: "#app"

            })

        </script>

    </body>

</html>

Vue props 单向数据流的更多相关文章

  1. vue.js实战——props单向数据流

    Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...

  2. vue prop单向数据流

    Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会.这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解. 另外,每次父组件更新时,子组件的所有 pro ...

  3. vue的单向数据流

    父级向子组件传递的值, 子组件不能直接修改这个穿过来的值,否则会曝出警告,这就是单项数据流. 如果是引用值,传递的是引用值得地址,而不是值本身,也就是说,子组件里修改这个传过来的值,通常的做法是放到它 ...

  4. vue之props传值与单向数据流

    (1)组件通信 父组件向子组件传递数据.这个正向传递数据的过程就是通过props来实现的. 两者区别:props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级,而 ...

  5. Vue 组件&组件之间的通信 之 单向数据流

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

  6. vue第九单元(非父子通信 events 单向数据流)

    第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...

  7. vue 单向数据流 & 双向绑定

    在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...

  8. vue第十八单元(单向数据流 vuex状态管理)

    第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...

  9. React 精要面试题讲解(一) 单向数据流

    react 单向数据流概念 'react框架是怎样的数据流向?'||'react单向数据流是怎样的概念 ?' 解答这个问题之前,我们首先得知道,js框架是个怎样的概念. 框架:具备一定**编程思想** ...

随机推荐

  1. scrapy抓取拉勾网职位信息（一）——scrapy初识及lagou爬虫项目建立

    本次以scrapy抓取拉勾网职位信息作为scrapy学习的一个实战演练 python版本:3.7.1 框架:scrapy(pip直接安装可能会报错,如果是vc++环境不满足,建议直接安装一个visua ...

  2. 洛谷——P1724 东风谷早苗

    P1724 东风谷早苗 题目描述 在幻想乡,东风谷早苗是以高达控闻名的高中生宅巫女.某一天,早苗终于入手了最新款的钢达姆模型.作为最新的钢达姆,当然有了与以往不同的功能了,那就是它能够自动行走,厉害吧 ...

  3. 关于matplotlib，你要的饼图在这里

    Table of Contents 1  官方Demo 2  将实际数据应用于官方Demo 3  一些改善措施 3.1  重新设置字体大小 3.2  设置显示颜色,Method 1: 3.3  设置显 ...

  4. Visual Studio Xamarin提示Bonjour backend初始化失败

    Visual Studio Xamarin提示Bonjour backend初始化失败 错误信息:The Bonjour backend failed to initialize, automatic ...

  5. 【BZOJ 1095】 1095: [ZJOI2007]Hide 捉迷藏 （括号序列+线段树）

    1095: [ZJOI2007]Hide 捉迷藏 Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏 ...

  6. Java 对象池实现

    http://blog.csdn.net/bryantd/article/details/1100019 http://www.cnblogs.com/devinzhang/archive/2012/ ...

  7. HDU 6040 Hints of sd0061（划分高低位查找）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6040 [题目大意] 给出一个随机数生成器,有m个询问,问第bi小的元素是啥 询问中对于bi< ...

  8. [BZOJ3576]江南乐

    挺好的题 我们算出每个数的sg值后异或起来即可 对于$n$,我们要求$sg_n$ 朴素的想法是枚举把$n$个石子分成$m$堆,有$m-n\%m$堆大小为$\left\lfloor\frac nm\ri ...

  9. 【构造】Gym - 101411F - Figure ans Spots

    在最外围的一圈没有意义,所以全都涂黑,内部贪心地涂成棋盘即可. #include<cstdio> #include<cstring> using namespace std; ...

  10. http请求 url 传递参数(特殊字符)解决方法

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.下表中列出了一些URL特殊符号及编码       十六进制值 1. + URL 中+号表示空格 %2B ...