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 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
给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实现图片简单上传
2006/10/09 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JS中操作JSON总结
2020/12/06 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
深入了解js原型模式
2019/05/30 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
费用会计岗位职责
2014/01/01 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
《小池塘》教学反思
2014/02/28 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
MySQL数据管理操作示例讲解
2022/12/24 MySQL