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框架myJSFrame附API使用帮助
Jun 28 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
小程序实现左滑删除效果
Jul 25 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
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python内存映射文件读写方式
2020/04/24 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
北承题目(C++)
2012/05/16 面试题
应届生.NET方向面试题
2015/05/23 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
初中作文评语大全
2014/04/23 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书