详解vue父子组件间传值(props)


Posted in Javascript onJune 29, 2017

先定义一个子组件,在组件中注册props

<template>

  <div>

    <div>{{message}}(子组件)</div>

  </div>

</template>

<script>

export default {

  props: {

    message: String //定义传值的类型<br>  }

}

</script>

<style>

</style>

在父组件中,引入子组件,并传入子组件内需要的值

<template>

  <div>

    <div>父组件</div>

    <child :message="parentMsg"></child>  

  </div>

</template>

 

<script>

 

import child from './child' //引入child组件

export default {

  data() {

      return {

        parentMsg: 'a message from parent' //在data中定义需要传入的值

      }

    },

    components: {

      child

    }

}

</script>

<style>

</style>

这种方式只能由父向子传递,子组件不能更新父组件内的data

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

Javascript 相关文章推荐
JS常用表单验证方法总结
May 22 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 #Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 #Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 #Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
You might like
第八节 访问方式 [8]
2006/10/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
python的id()函数介绍
2013/02/10 Python
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Delphi工程师笔试题
2013/09/21 面试题
业务副厂长岗位职责
2014/01/03 职场文书
体操比赛口号
2014/06/10 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python