先定义子组件,注册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. Guava Cache本地缓存

    Guava介绍 Guava是一种基于开源的Java库,其中包含谷歌正在由他们很多项目使用的很多核心库. 这个库是为了方便编码,并减少编码错误. 这个库提供用于集合,缓存,支持原语,并发性,常见注解,字 ...

  2. loj10087 Intervals

    传送门 分析 我们设S[i]表示到第i个数为止一共有多少个数在集合Z之中,最终答案就是S[max]-S[min]的最小值.所以我们不难发现对于每一个[ai,bi]都表示S[bi]-S[ai-1]> ...

  3. Luogu 1484 种树

    Luogu 1792 算是双倍经验. 我们考虑对于一个点,我们要么选它,要么选它周围的两个点. 所以我们考虑用一个堆来维护,每次从堆顶取出最大值之后我们把它的权值记为:它左边的权值加上它右边的权值减去 ...

  4. Entity Framework Tutorial Basics(1):Introduction

    以下系列文章为Entity Framework Turial Basics系列 http://www.entityframeworktutorial.net/EntityFramework5/enti ...

  5. mysql--约束条件

    主键的测试  PRIMARY KEY(PRIMARY可以省略) --查看创建表的标的定义,可以查看主键 SHOW CREATE TABLE user1; ,'king');--主键不能重复 ,'kin ...

  6. 共享库so

    so文件在linux中为共享库,与windows下的dll类似. so文件中的函数可供多个进程调用,最大可能的提供二进制代码的复用. 共享库可以使代码的维护工作大大简化,当修正了一些错误或者添加了新特 ...

  7. Picasso VS Glide

    原文: Introduction to Glide, Image Loader Library for Android, recommended by Google 在泰国举行的谷歌开发者论坛上,谷歌 ...

  8. PHP常用的服务器

    Wordpress够流行了吧,它是一个用PHP编写的强大的博客平台.使用它来架设一个博客平台相关容易,是新手建站比较方便的工具.但是要真正体会Wordpress(以下简称WP)强大,插件是不可少的东西 ...

  9. .NET DataTable DataSet转json代码

    /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"> ...

  10. [CentOS7] 设置语言环境

    博主想要将英文环境(en_US.UTF-8)改为中文环境(zh_CN.UTF-8),有两种解决方法 一.临时解决方法 使用LANG=“zh_CN.UTF-8”,这个命令来实现,不过在重新登录的时候又会 ...