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跟随滚动条滚动浮动代码
Dec 31 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
详解vue组件之间的通信
Aug 30 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php生成验证码函数
2015/10/20 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python创建临时文件和文件夹
2020/08/05 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
《小池塘》教学反思
2014/02/28 职场文书
社团活动总结
2014/04/28 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
影视广告专业求职信
2014/09/02 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
张丽莉观后感
2015/06/16 职场文书
新员工入职感想
2015/08/07 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
python常见的占位符总结及用法
2021/07/02 Python