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. HDU 6162 Ch’s gift （树剖 + 离线线段树）

    Ch’s gift Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  2. C++中的error C2662，const的this指针问题

    今天在写C++代码的时候遇到一个错误,涉及到了常量的this指针的问题. 简化后的代码如下: #include <iostream> #include <string> usi ...

  3. [BZOJ 1855] 股票交易

    Link: BZOJ 1855 传送门 Solution: 比较明显的$dp$模型 令$dp[i][j]$为第$i$天持有$j$支股票时的最大利润 对其购买股票和售出股票分别$dp$,这里以购买为例: ...

  4. 【数论】【枚举】【莫比乌斯反演】【线性筛】bzoj2818 Gcd

    思路是hdu6134的简化版,只需要在外面套上一个枚举素数就行了. http://www.cnblogs.com/autsky-jadek/p/7491730.html #include<cst ...

  5. （原创）Stanford Machine Learning (by Andrew NG) --- (week 5) Neural Networks Learning

    本栏目内容来自Andrew NG老师的公开课:https://class.coursera.org/ml/class/index 一般而言, 人工神经网络与经典计算方法相比并非优越, 只有当常规方法解 ...

  6. lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵

    思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...

  7. 1.3（SQL学习笔记）计算字段及函数

    一.计算字段 1.1拼接字段 一般情况下返回的字段是指定列的属性名.如果有时我们对返回格式有特殊要求. 例如,我们需要将显示商品名,即商品价格,同时商品名后面的价格放在括号内. prod_name(p ...

  8. Problem D: 零起点学算法94——输出矩阵

    #include<stdio.h> int main() { ][]; while(scanf("%d %d",&n,&m)!=EOF) { ; ;i& ...

  9. php-scandir()报错

    l       linux下 vim /usr/local/php/etc/php.in l       直接斜杠找 /disable_functions   回车 l       按i键 l     ...

  10. bash中的通配符使用

    通配符的使用 bash命令中的字符由:普通字符.通配符.元字符.转义符构成. 通配符 由shell处理的(不是由所涉及到命令语句处理的,其实我们在shell各个命令中也没有发现有这些通配符介绍), 它 ...