先定义子组件,注册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. Unity3d 脚本与C#Socket服务器传输数据

    Test.cs脚本 ------------------------------------------------------------------------------------------ ...

  2. zedboard:使用ISE和modelsim搭建仿真环境 标签: zedboardfpgamodelsimise 2017-03-03 14:00 528人阅读

    详细步骤: 产生ISE仿真库文件 开始->所有程序->xilinx design tools->simulation library compilation wizard.路径可能不 ...

  3. noi.ac day6t1 queen

    传送门 分析 我就是个BT...... 直接排序后开数组记录每条线上的信息,注意由于每个点只会影响前面第一个点和后面第一个点,所以记录每条线的前一个点就行了. 代码 #include<iostr ...

  4. noi.ac day1t1 candy

    传送门 分析 我们知道如果设A,B分别为将两家店从大到小排序之后各自的前缀和,则 Ans=Max{Min{A[i],B[j]}-W*(i+j)}. 为了得到这个Ans我们可以枚举两个数的Min,然后剩 ...

  5. java的编码问题详解

    ucenter的中文问题终于解决,这也暴露我对Java编码知识的严重不足,经过多次试验和搜索,对这块知识终于有了一个新的认识,所以把理解的内容写道这里 1:JVM的内存中字符串的编码格式是统一的吗? ...

  6. 算法导论 寻找第i小元素 9.2

    PS1:如果单纯为做出这道题那么这个代价是O(nlgn),通过排序就可以了. 这里讨论的是O(n)的算法.那么来分析一下这个算法是如何做到O(n)的,算了不分析了,这个推到看起来太麻烦了.其实我想知道 ...

  7. 修改Oracle游标数及排查游标问题相关SQL

    查看当前游标数show parameter open_cursors; 修改游标最大数 ; commit; 查看游标消费情况 select o.sid, osuser, machine, count( ...

  8. [转]MySQL时间与字符串相互转换

    转至:https://www.cnblogs.com/wangyongwen/p/6265126.html 时间.字符串.时间戳之间的互相转换很常用,但是几乎每次使用时候都喜欢去搜索一下用法:本文整理 ...

  9. sql 简单的定义变量 声明 输出

    --定义变量 声明 变量名 数据类型 varchar默认长度为1 --char 当字符不够时 用空格代替 declare @a char(10) --字符串用单引号 set @a ='abcdef' ...

  10. DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版

    关于 DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...