先定义子组件,注册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. HDOJ 1164 Eddy's research I

    Problem Description Eddy's interest is very extensive, recently he is interested in prime number. Ed ...

  2. K-D TREE算法原理及实现

    博客转载自:https://leileiluoluo.com/posts/kdtree-algorithm-and-implementation.html k-d tree即k-dimensional ...

  3. c++ 子类切勿重新定义父类 non-virtual函数

    子类如果重新定义了父类的non-virtual函数则不会有多态效果. 为方便描述,这里的方法和继承方式都用public.至于原因嘛,你懂的! 1:子类直接继承父类方法 class BaseOption ...

  4. GCD 学习(一)简介

    文章摘抄至:http://zhuyanfeng.com/archives/3015 并有一些改动 GCD(Grand Central Dispatch)是从OS X Snow Leopard和iOS ...

  5. mybatis spring maven

    maven版本:3.3.9  解压即可使用 spring版本:4.3.9  通过maven进行管理下载 mybatis版本:3.4.4 通过maven进行管理下载 mysql版本:5.7  conne ...

  6. 搭建邮件服务器 Postfix + Dovecot (CentOS)

    最近分配到一台ECS服务器,需要搭建一台邮件服务器. 查了一波资料选择了Postfix (smtp)和 Dovecot(pop3). 推荐教程:http://www.cnblogs.com/zlbei ...

  7. 根据某条件给GridView符合条件的值画上删除线

    如博文标题,根据某些条件对GridView控件中,对符合条件的值画上删除线效果.实现这些要求,只人捕获到哪些符合要求的数据即可.GridView控件是在TemplateField模版显示数据,Insu ...

  8. 正经学C#_判断[switch语句]:[c#入门经典]

    switch是一个和IF语句极其相似的语句.但是Switch允许条件可以有多个值. 程序的基本结构如下 switch(textVal) { case Val: 程序代码 break case Val2 ...

  9. 树形DP--求树上任意两点间距离和

    例题:HDU2376   HDU6446(2018CCPC网络赛) 思路:求任意两点间距离和可以转换为->路径长度乘经过路径次数的和. 求经过次数:设这条边两端的点,被经过的次数分别为A和B,那 ...

  10. JAVA进阶----ThreadPoolExecutor机制(转)

    http://825635381.iteye.com/blog/2184680 ThreadPoolExecutor机制 一.概述 1.ThreadPoolExecutor作为java.util.co ...