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代码)
Oct 29 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
Yii学习总结之安装配置
2015/02/22 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python集合类型用法分析
2015/04/08 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
小学新学期教师寄语
2014/01/18 职场文书
教学实验楼管理制度
2014/02/01 职场文书
重阳节活动总结
2014/08/27 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2015年双拥工作总结
2015/04/08 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL