详解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的反射问题
Apr 07 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
angular中的post请求处理示例详解
Jun 30 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开发模式(简写版)
2007/03/15 PHP
php学习之运算符相关概念
2011/06/09 PHP
php中Snoopy类用法实例
2015/06/19 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
美德好少年主要事迹
2014/01/29 职场文书
毕业实习评语
2014/02/10 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
亮剑观后感500字
2015/06/05 职场文书
政审证明材料
2015/06/19 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Nginx如何配置根据路径转发详解
2022/07/23 Servers