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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
浅析php数据类型转换
2014/01/09 PHP
php中session使用示例
2014/03/29 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Django入门使用示例
2017/12/12 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
自我鉴定怎么写
2013/12/05 职场文书
知识竞赛活动方案
2014/02/18 职场文书
交通安全责任书范本
2014/07/24 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers