详解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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
详解如何使用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,不用COM,生成excel文件
2006/10/09 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
eclipse php wamp配置教程
2016/06/30 PHP
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
C有"按引用传递"吗
2016/09/06 面试题
经典c++面试题三
2015/07/08 面试题
会计专业自我鉴定
2014/02/10 职场文书
运动会口号8字
2014/06/07 职场文书
体育口号大全
2014/06/18 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书