文档章节

Vue 父子组件传值 props

o
 osc_gu9d45li
发布于 2019/04/08 23:02
字数 533
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

     1、Vue 的渲染周期:

      vue生命周期

                          vue 如何实现响应式追踪。

                  

 

      父子组件通信有很多方式,今天单独聊下props 的方式。我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式。

                  当然props 还提供许多验证,使数据更加严谨。

                  在使用父子传值时,出现了, 按照文档说明,例如:

 

 1 <template>
 2     <div v-if="data">{{parentName}}
 3         
 4         <input type="text"  v-model="parentName" />
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10  props:{
11      parentName:String 
12  },
13  data(){
14     return {
15         data:this.parentName
16     }
17  },
18  
19  beforeCreate(){
20      console.log("child beforeCreate");
21  },
22  created(){
23      console.log("child created"+this.parentName);
24  },
25  mounted(){
26      console.log("child data Mounted"+this.parentName);
27  },
28  beforeMount(){
29      console.log("beforeMount data"+this.parentName);
30  },
31  beforeUpdate(){
32      console.log("beforeUpdate data"+this.parentName)
33  }
34 
35 }
36 </script>
37 
38 <style>
39 
40 </style>

父组件引用:

  

<template>
    <div>    <child  :parent-name="name"/>
    <input   type="text" v-model="name" />
</div>
</template>

<script>
import child from './child.vue'
export default {
   components:{
       child
   },
   data(){
       return {
           name:"asda"
       }
   },
   beforeCreate(){
       console.log("parent beforeCreate")
   },
   created(){
       console.log("parent created")
       
   },
   beforeMount(){
       console.log("parent beforeMount")
   },
   mounted(){
       console.log(" parent mounted")
        this.name="hahshdf"
   }
}
</script>

<style>

</style>

  突然想到,这个父子组件渲染的顺序如何,如上述代码,

  

 

     如图所示,渲染顺序是从子组件先挂载后,父组件在挂载。这个渲染顺序可以决定我何时传值,比较。

     从执行渲染顺序来说,给子组件的props 中赋值,应该在父组件挂载前,最好是在子组件创建前即 beforeCreate 方法后,赋值。 切不可在beforeCreate 赋值,会导致未定义错误。

    如果在父组件挂载后,赋值会出现什么情况呢。

  没错,和你猜想的很对,会触发子组件的更新事件,会导致局部在渲染。

  看文档提示,一般的props 传值,可以作为data()方法的中return的初始值使用,在作为初始值使用时,切记

data(){
    return {
        data:this.propsValue
        }
   }

  这个是从新返回一个新值,this.propsValue 改变不会再影响data 的值。

     最后说一句,现在vue 是单向的数据流,即 改变父组件中的值,可以影响子组件的值,但是改变子组件的值,父组件的值不变。

 

                 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep
2018/05/13
0
0
vue项目中的父子组件之间的传值。

首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下,父...

osc_cnpchqmq
2019/08/01
10
0
24、商品列表页之数据渲染和传值

前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24) 1、商品列表页基本数据结构及mock 在文...

Ewall_
2018/08/30
0
0
02-进阶

使用Vue的细节点 父子组件的传值 组件参数校验与非props特性 给组件绑定原生事件

CALL_ME_MAJORX
2019/05/09
11
0
Vue笔记(9) - 发布订阅模式

在这里我们记录了如何实现父子组件间的传值。 如果要在非父子组件间传值呢?我们就要用到发布订阅模式(也叫bus或总线)。 在Vue的原型上定义一个变量bus,所有所有Vue的实例或组件都将共享这...

神奇的小卷毛
2018/04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java学习day45-Thymeleaf教程(转载)

目录 Thymeleaf 教程 1. 创建模板文件 2. 标准表达式语法 2.1 简单表达式 2.1.1 ${…} 2.1.2 *{…} 2.1.3 #{…} 2.1.4 @{…} 2.1.5 ~{…} 2.1.6 内置对象 2.1.7 工具类 2.2 字面值 2.2.1 文字...

osc_nbg2lo7i
11分钟前
0
0
记录用户登陆信息,你用PHP是如何来实现的

对于初入门的PHP新手来说,或许有一定的难度。建议大家先看看PHP中session的基础含义,需要的朋友可以选择参考。 下面我们就通过具体的代码示例,为大家详细的介绍PHP中session实现记录用户登...

php开源社区
11分钟前
13
0
语音系统源码的开发,一对一语音直播源码

对于大多数人来说,直播已经不再陌生了,所谓是家喻户晓,只要是有智能手机,对于直播肯定是有所了解,对于直播大家想到是娱乐性的互动直播,其实视频直播的话也不是只有这一种方式,还有语音...

qq3595750856
11分钟前
9
0
友链

下面是我的友链啦~~ 外校大佬 _redness 魔法少女 Kylin_Seven 宠辱不惊,闲看庭前花开花落;去留无意,任随天边云卷云舒 Areds 不忘初心,方得使终 Quaint 技术宅拯救世界 校内巨佬们 wxyww ...

osc_94gn551r
12分钟前
5
0
友链

下面是我的友链啦~~ 外校大佬 _redness 魔法少女 Kylin_Seven 宠辱不惊,闲看庭前花开花落;去留无意,任随天边云卷云舒 Areds 不忘初心,方得使终 Quaint 技术宅拯救世界 校内巨佬们 wxyww ...

osc_xih8lf91
13分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部