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 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python创建日历实例
2014/08/21 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python中用Spark模块的使用教程
2015/04/13 Python
python做反被爬保护的方法
2019/07/01 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python 代码运行时间获取方式详解
2020/09/18 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
文明演讲稿范文
2014/05/12 职场文书
铣工实训报告
2014/11/05 职场文书
老龙头导游词
2015/02/11 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang