Vue props 单向数据流的实现


Posted in Javascript onNovember 06, 2018

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: ''
        }//前端全栈开发交流群:
      })//866109638
    </script>//帮助1-3年工作人员
  </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>//前端全栈交流学习圈:
//866109386,帮助1-3年前端人员
  <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
document.getElementById介绍
Sep 13 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js中this对象用法分析
Jan 05 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Yii全局函数用法示例
2017/01/22 PHP
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
python实现飞机大战项目
2020/03/11 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
自荐信格式
2013/12/01 职场文书
师德学习感言
2014/01/31 职场文书
梅花魂教学反思
2014/04/25 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2014年共青团工作总结
2014/12/10 职场文书
感恩教育观后感
2015/06/17 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书