先定义子组件,注册prop接收父组件传递的值

<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>

prop只能父组件传递给子组件,子组件不能修改父组件的data

vue父子组件通信(prop)的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  3. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  4. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  5. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  6. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  7. beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...

  8. vue父子组件通信传值

    父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...

  9. Vue 父子组件通信入门

    父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...

随机推荐

  1. MySQL update select组合

    update t_news inner join (select readCount from t_news t2 where t2.id=1) t1 set t_news.readCount = t ...

  2. 15-struct(构造函数,重载)

    必须充分掌握struct的使用,包括其构造和重载函数的写法: #include <iostream> using namespace std; struct node { int x, y ...

  3. 使用RSS提升DPDK应用的性能(转)

    本文描述了RSS以及在DPDK中如何配置RSS达到性能提升和统一分发. 什么是RSS RSS(Receive Side Scaling)是一种能够在多处理器系统下使接收报文在多个CPU之间高效分发的网 ...

  4. Luogu 3292 [SCOI2016]幸运数字

    BZOJ 4568. 感觉很板. 前置技能:线性基.      放一篇感觉讲的比较丰富的博客: 戳这里. 首先要求在一个序列中任意选点使得异或和最大,当然是想到线性基了. 把问题转换到树上,如果每次询 ...

  5. debug配置

  6. unix 下 shell 遍历指定范围内的日期

    UNIX下遍历日期,date 没有 -d 的参数,所以需要自己处理. 下面使用时差的方法进行计算,遍历的日期是降序的 #!/usr/bin/ksh . $HOME/.profile timelag= ...

  7. winFrom程序更新自动安装

    我就以一个计算字符长度的程序为例子吧界面如下 代码如下 [C#] 纯文本查看 复制代码 ? 01 02 03 04 private void  button1_Click(object sender, ...

  8. c# 捕获非托管异常

    在.NET 4.0之后,CLR将会区别出一些异常(都是SEH异常),将这些异常标识为破坏性异常(Corrupted State Exception).针对这些异常,CLR的catch块不会捕捉这些异常 ...

  9. SPC-Light显示正常的日期与时间

    SPC-Light的日期值与时间值显示正常的日期与时间.在读取到它的日期值: 得到的结果,如: 读取时间: 得到的结果如0.556678240740741. 要把它们显示正常的日期与时间格式.在VB. ...

  10. loj #2007. 「SCOI2015」国旗计划

    #2007. 「SCOI2015」国旗计划   题目描述 A 国正在开展一项伟大的计划 —— 国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这项计划需要多名边防战士以接力的形式共同完成 ...