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时间日期和毫秒的相互转换
Feb 22 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
jquery实现拖动效果
2016/08/10 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
python测试驱动开发实例
2014/10/08 Python
python 中字典嵌套列表的方法
2018/07/03 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
详解Python self 参数
2019/08/30 Python
django创建超级用户过程解析
2019/09/18 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python的help函数如何使用
2020/06/11 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
法学函授自我鉴定
2014/02/06 职场文书
生日主持词
2014/03/20 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
民主生活会发言材料
2014/10/20 职场文书
2015年工程师工作总结
2015/04/30 职场文书
开工典礼致辞
2015/07/29 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
SQL Server 中的事务介绍
2022/05/20 SQL Server