详解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 相关文章推荐
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
jquery滚动特效集锦
Jun 03 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
javascript中new关键字详解
Dec 14 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
Vue.extend构造器的详解
2017/07/17 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python 自动轨迹绘制的实例代码
2019/07/05 Python
机械专业应届生求职信
2013/09/21 职场文书
思想专业自荐信范文
2013/12/25 职场文书
24岁生日感言
2014/01/13 职场文书
法制宣传标语
2014/06/23 职场文书
促销活动总结模板
2014/07/01 职场文书
保密工作目标责任书
2014/07/28 职场文书
岗位工作说明书
2014/07/29 职场文书
2014年保管员工作总结
2014/11/18 职场文书
公务员处分决定书
2015/06/25 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
PL350与SW11的比较
2021/04/22 无线电
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技