父组件传递数据给子组件用props,父组件中使用子组件,子组件用props接收父组件数据。

Home父组件代码:

<template>
<div>
{{test}}
<!-- 使用子组件,绑定父组件数据数据 -->
<Child :test="test"></Child>
</div>
</template>
<script>
// import子组件
import Child from './Child.vue'
export default {
name: "Home",
//components引入子组件
components:{
Child
},
data () {
return {
test:123
};
}
}
</script>
<style lang="css" scoped>
</style>

Child子组件代码:

<template>
<div>
<!-- 使用子组件数据 -->
{{test}}
</div>
</template>
<script>
export default {
name: "Child",
// props使用获取父组件数据
props:["test"],
data () {
return { };
},
created(){
// 使用子组件数据
console.log(this.test); }
}
</script>
<style lang="css" scoped>
</style>

vue父传子的更多相关文章

  1. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  2. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  3. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  4. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  5. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  6. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  7. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  8. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  9. vue传值 ---- >> 父传子,props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

随机推荐

  1. Node使用 Express框架,实现文件上传

    一 安装依赖包 npm install multer --save 二 客户端上传文件 <!DOCTYPE html> <html> <head> <meta ...

  2. stm32初做项目心得

    在导师的带领下,基本了解了嵌入式的开发的基本流程: 1.首先从厂家拿到样板之后,首先进行检测,检测什么呢,先检测电源系统,看你的电源系统是否能够正常工作,就是各个管脚是否短路,断路. 2.检测完之后, ...

  3. 利用crontab每天定时备份MySQL数据库

    当数据库服务器建立并正式投入生产使用后,我们不得不担忧一个问题:当数据库遭到破坏后,怎样安然恢复到最后一次正常的状态,使得数据的损失达到最小. 我这里以本博客的wordpress数据为例,来讨论并实现 ...

  4. Java_10 继承

    1 继承的好处 继承的出现提高了代码的复用性,提高软件开发效率. 继承的出现让类与类之间产生了关系,提供了多态的前提. 2 继承的注意事项 在Java中,类只支持单继承,不允许多继承,也就是说一个类只 ...

  5. 永久激活win和office

    1.关闭自己安装的防护软件 2. 关闭电脑自带的防护软件 3.运行 KMSpico

  6. solrj 测试连接 6.6.5solr集群

    我开始环境是 linux上是6.6.5  pom也是6.6.5 按照学习视频的demo,他用的是4点几的solr,我换成了6点几的,没有CloudSolrServer  只有CloudSolrClie ...

  7. CALL transaction 的用法-传内表

    使用memory (这个方法和第二种方式的区别是可以传输复选框的值) data:  wfbomcom type rc29n.  move-corresponding bom_key to wfbomc ...

  8. 左侧菜单栏,有对个li对应一个content

    html部分截图 不多说直接上js /*左侧导航栏*/var sect=$(".sect"); $(".nav-list .nav-a").each(funct ...

  9. idea快捷键及快捷方法(待完善)

    一.快捷键 alt+insert      插入get.set.构造函数等 ctrl+shift+alt+g   生成注释文档 ctrl+shift+alt+z   移除注释文档 Ctrl + Alt ...

  10. matlab函数拟合

    1 函数拟合 函数拟合在工程(如采样校正)和数据分析(如隶属函数确定)中都是非常有用的工具.我这里将函数拟合分为三类:分别是多项式拟合,已知函数类型的拟合和未知函数类型的拟合.matlab中关于函数的 ...