详解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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 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
php中call_user_func函数使用注意事项
2014/11/21 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php正则表达式学习笔记
2015/11/13 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python入门篇之字典
2014/10/17 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
保荐人的岗位职责
2013/11/19 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
采购意向书范本
2014/03/31 职场文书
投资合作协议书
2014/04/17 职场文书
师德师风自我评价范文
2014/09/11 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
神秘岛读书笔记
2015/07/01 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
我收到了德劲DE1107
2022/04/05 无线电