Vue.js组件使用props传递数据的方法


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了Vue.js使用props传递数据的具体代码,供大家参考,具体内容如下

基本用法

通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。

在组件中,使用选项props来声明需要从父级接收的数据,props的值可以是两种,一种是字符串数组,一种是对象。

示例:构造一个数组,接收一个来自父组件的message,并把它再组件模板中渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>props</title>
</head>
<body>
  <div id="myApp">
    <my-component message="来自父组件的数据"></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      props: ['message'],
      template: '<div>{{message}}</div>'
    });

    var myApp = new Vue({
      el: '#myApp'
    });
  </script>
</body>
</html>

props中声明的数据与组件函数return的数据主要区别是:**props的数据来自父级,而data中的数据是组件自己的数据,作用域是组件本身。**这两种数据都可以在模板template及计算属性computed和方法methods中使用。

上例的数据message就是通过props从父级传递过来的,在组件的字的那个一标签上直接写该props的名称,如果要传递多个数据,在props数组中添加项即可。

注意:由于HTML特性不区分大小写,当使用DOM模板时,驼峰命名的props名称要转为短横分割命名,例如:

<div id="app">
    <my-component warning-text="提示信息"></my-component>
</div>
<script>
//如果使用字符串模板,可以忽略这些限制
  Vue.component('my-component',{
    props: ['warningText'],
    template: '<div>{{warningText}}</div>'
  });

  var app = new Vue({
    el: '#app'
  });
</script>

有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时候可以使用指令v-bing来动态绑定props的值,当父组件的数据变化时,也会传递给子组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>动态绑定</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="parentMessage">
    <my-component :message="parentMessage"></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      props: ['message'],
      template: '<div>{{message}}</div>'
    });

    var app = new Vue({
      el: '#app',
      data: {
        parentMessage: ''
      }
    });
  </script>
</body>
</html>

Vue.js组件使用props传递数据的方法

上例使用v-model绑定了父级的数据parentMessage,当通过输入框任意输入时,子组件接受到的props "message"也会实时响应,并更新组件模板。

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
JS随机密码生成算法
Sep 23 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
Vue.js组件通信之自定义事件详解
Oct 19 #Javascript
Vue.js自定义指令学习使用详解
Oct 19 #Javascript
Vue.js标签页组件使用方法详解
Oct 19 #Javascript
基于JavaScript获取base64图片大小
Oct 18 #Javascript
react MPA 多页配置详解
Oct 18 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
判断网页编码的方法python版
2016/08/12 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python的socket编程入门
2018/01/29 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
django框架自定义用户表操作示例
2018/08/07 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
祖国在我心中演讲稿400字
2014/05/04 职场文书
自主招生自荐信范文
2015/03/04 职场文书
小学体育教学随笔
2015/08/14 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Python进程间的通信之语法学习
2022/04/11 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js