详解vue2父组件传递props异步数据到子组件的问题
作者：无尽_故事
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
测试环境：vue v2.3.3， vue v2.3.1
父组件parent.vue
// asyncData为异步获取的数据，想传递给子组件使用
&template&
&child :child-data="asyncData"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncData: ''
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncData = 'async data'
console.log('parent finish')
子组件child.vue
&template&
子组件{{childData}}
&/template&
export default {
props: ['childData'],
data: () =& ({
created () {
console.log(this.childData) // 空值
methods: {
上面按照，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题)
parent.vue
&template&
&child :child-object="asyncObject"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncObject: ''
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
&template&
子组件&!--这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？--&
&p&{{childObject.items[0]}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
created () {
console.log(this.childObject) // 空值
methods: {
created里面的却不会发生改变， 子组件的html中的{{{childObject.items[0]}}的值虽然会随着父组件的值而改变，但是过程中会报错
// 首先传过来的是空，然后在异步刷新值，也开始时候childObject.items[0]等同于''.item[0]这样的操作，所以就会报下面的错
vue.esm.js? [Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"
针对二的解决方法：
使用v-if可以解决报错问题，和created为空问题
// parent.vue
&template&
&child :child-object="asyncObject" v-if="flag"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncObject: '',
flag: false
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncObject = {'items': [1, 2, 3]}
this.flag = true
console.log('parent finish')
&template&
&!--不报错--&
&p&{{childObject.items[0]}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
created () {
console.log(this.childObject)// Object {items: [1,2,3]}
methods: {
子组件使用watch来监听父组件改变的prop，使用methods来代替created
parent.vue
&template&
&child :child-object="asyncObject"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncObject: ''
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
&template&
子组件&!--1--&
&p&{{test}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
'childObject.items': function (n, o) {
this.test = n[0]
this.updata()
methods: {
updata () { // 既然created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
console.log(this.test)// 1
子组件watch computed data 相结合，有点麻烦
parent.vue
&template&
&child :child-object="asyncObject"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncObject: undefined
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
&template&
子组件&!--这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？--&
&p&{{test}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
'childObject.items': function (n, o) {
this._test = n[0]
computed: {
set (value) {
this.update()
this.test = value
return this.test
methods: {
update () {
console.log(this.childObject) // {items: [1,2,3]}
使用emit，on，bus相结合
parent.vue
&template&
&child&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
components: {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
// 触发子组件，并且传递数据过去
this.$bus.emit('triggerChild', {'items': [1, 2, 3]})
console.log('parent finish')
&template&
&p&{{test}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
created () {
this.$bus.on('triggerChild', (parmas) =& {
this.test = parmas.items[0] // 1
this.updata()
methods: {
updata () {
console.log(this.test) // 1
这里使用了这个库，parent.vue和child.vue必须公用一个事件总线（也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接），才能相互触发
使用prop default来解决{{childObject.items[0]}}
parent.vue
&template&
&child :child-object="asyncObject"&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
asyncObject: undefined // 这里使用null反而报0的错
components: {
created () {
mounted () {
// setTimeout模拟异步数据
setTimeout(() =& {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
&template&
子组件&!--1--&
&p&{{childObject.items[0]}}&/p&
&/template&
export default {
childObject: {
type: Object,
default () {
data: () =& ({
created () {
console.log(this.childObject) // {item: ''}
在说用vuex解决方法的时候，首先看看案例三
import Vue from 'vue'
import App from './App'
import router from './router'
import VueBus from 'vue-bus'
import index from './index.js'
Vue.use(VueBus)
Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
/* eslint-disable no-new */
el: '#app',
template: '&App/&',
components: { App }
const state = {
asyncData: ''
const actions = {
asyncAction ({ commit }) {
setTimeout(() =& {
commit('asyncMutation')
const getters = {
const mutations = {
asyncMutation (state) {
state.asyncData = {'items': [1, 2, 3]}
export default {
parent.vue
&template&
&child&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
components: {
created () {
this.$store.dispatch('asyncAction')
mounted () {
&template&
&p&{{$store.state.index.asyncData.items[0]}}&/p&
&/template&
export default {
data: () =& ({
created () {
methods: {
{{$store.state.index.asyncData.items[0]}}可以取到改变的值，但是过程中还是出现这样的报错，原因同上
[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"
所以这里的解决方法是：vuex结合computed、mapState或者合computed、mapGetters
parent.vue
&template&
&child&&/child&
&/template&
import child from './child'
export default {
data: () =& ({
components: {
created () {
this.$store.dispatch('asyncAction')
mounted () {
&template&
&p&{{item0}}&/p&
&p&{{item}}&/p&
&/template&
import { mapState, mapGetters } from 'vuex'
export default {
data: () =& ({
computed: {
...mapGetters({
item: 'getAsyncData'
...mapState({
item0: state =& state.index.asyncData
created () {
methods: {
const state = {
asyncData: ''
const actions = {
asyncAction ({ commit }) {
setTimeout(() =& {
commit('asyncMutation', {'items': [1, 2, 3]})// 作为参数，去调用mutations中的asyncMutation方法来对state改变
const getters = {
getAsyncData: state =& state.asyncData
const mutations = {
asyncMutation (state, params) {
state.asyncData = params.items[0] // 此时params={'items': [1, 2, 3]}被传过来赋值给asyncData，来同步更新asyncData的值，这样html就可以拿到asyncData.items[0]这样的值了
export default {
注意上面的
commit('asyncMutation', {'items': [1, 2, 3]})
state.asyncData = params.items[0]
如果写成这样的话
commit('asyncMutation')
state.asyncData = {'items': [1, 2, 3]}
首先asyncAction是个异步的操作，所以asyncData默认值为空，那么还是导致,child.vue这里报0的错
&template&
&p&{{item0}}&/p&
&p&{{item}}&/p&
&/template&
不过根据以上的案例，得出来一个问题就是异步更新值的问题，就是说开始的时候有个默认值，这个默认值会被异步数据改变，比如说这个异步数据返回的object，如果你用props的方式去传递这个数据，其实第一次传递的空值，第二次传递的是更新后的值，所以就出现{{childObject.items[0]}}类似这种取不到值的问题，既然说第一次是空值，它会这样处理''.items[0],那么我们是不是可以在html判断这个是不是空（或者在computed来判断是否为默认值），所以把案例二的child.vue
&template&
&p&{{childObject != '' ? childObject.items[0]: ''}}&/p&
&/template&
export default {
props: ['childObject'],
data: () =& ({
created () {
console.log(this.childObject) // 空值
methods: {
这样是可以通过不报错的，就是created是空值，猜想上面vuex去stroe也可以也可以这样做
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具vuejs动态组件给子组件传递数据的方法详解
作者：CooMark
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了vuejs动态组件给子组件传递数据的方法详解的相关资料,需要的朋友可以参考下
通过子组件定义时候的props可以支持父组件给子组件传递数据，这些定义的props在子组件的标签中使用绑定属性即可，但是如果使用的是&component&动态组件，这个时候就没有显式的子组件标签，要给子组件传递数据需要在&component& 中进行绑定
&div class="app" id="deviceready"&
&component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"&&/component&
组件的作用于是独立的
组件的作用于是独立的，如果要从跟组件获取数据，那么需要一层层的传递才行，也就是说子组件只能从直接父组件获取数据，如果是根组件的数据，那么父组件就要继续暴露pops从而绑定来自根组件的数据。
以上所述是小编给大家介绍的vuejs动态组件给子组件传递数据的方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
组件：&test :loading.sync="loading"&&/test&
<ponent('test',{
template: '#testText',
loading: {
type: Boolean,
default: false
methods: {
getData: function (data) {
this.loading =//此句有错误，该如何更正
el: '#indexBox',
loading : false
methods : {
loadMore: function () {
this.loading =
我想在子组件里面变更loading的值回传给父组件，请问该如何控制loading
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
谢谢你的回答，问题已解决
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你用的是vue2吧，如果是vue2的话就应该用事件来把子组件的状态传给父组件，有两种办法，一种是在父组件中传一个v-model="outerLoading"，然后子组件里面
outerLoading: {
immediate: true,
handler() {
this.innerLoading = v
innerLoading (v) {
this.emit('input', v)
这样outLoading就会响应innerLoading，实现双向绑定的功能。还有一种做法和这个类似，就是把this.emit('input', v)换成this.emit('eventName', v),然后在父组件中@eventName="eventFunc", 再通过父组件中的eventFunc(v) { //code... }来响应子组件的状态
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Vue学习笔记-3 前言
Vue 2.x相比较Vue 1.x而言，升级变化除了实现了Virtual-Dom以外，给使用者最大不适就是移除的组件的props的双向绑定功能。
以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能，但是在Vue2中彻底废弃了此功能，如果需要双向绑定需要自己来实现。
Vue2的组件props通信方式
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
关于这一点的修改官方给的解释：
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的，但是在某些时候我们确实需要从组件内部修改props的需求
假设我要做一个iOS风格的开关按钮，需求就只有两个：
点击按钮实现 开/关 状态切换
不点击按钮，也可以通过外部修改数据切换开关状态，比如级联联动开关。
代码大致是类似这样的：
&div id=&app&&
&!--开关组件--&
&switchbtn :result=&result&&&/switchbtn&
&!--外部控制--&
&input type=&button& value=&change& @click=&change&&
//开关组件代码
Vue.component(&switchbtn&,{
template:&&div @click=&#39;change&#39;&{{result?&#39;开&#39;:&#39;关&#39;}}&/div&&,
props:[&result&],
this.result=!this.result;
//调用组件
el: &#app&,
result:true//开关状态数据
this.result=!this.result;
但是在vue2.0中上面的代码在点击开关时会报错：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &result& (found in component )
组件内不能修改props的值，同时修改的值也不会同步到组件外层，即调用组件方不知道组件内部当前的状态是什么
在Vue2.0中，实现组件属性的双向绑定方式
1. 在组件内的data对象中创建一个props属性的副本
因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。
Vue.component(&switchbtn&, {
template: &&div @click=&#39;change&#39;&{{myResult?&#39;开&#39;:&#39;关&#39;}}&/div&&,
props: [&result&],
data: function () {
myResult: this.result//data中新增字段
2. 创建针对props属性的watch来同步组件外对props的修改
此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。
Vue.component(&switchbtn&, {
template: &&div @click=&#39;change&#39;&{{myResult?&#39;开&#39;:&#39;关&#39;}}&/div&&,
props: [&result&],
data: function () {
myResult: this.result
result(val) {
this.myResult = val;//新增result的watch，监听变更并同步到myResult上
3. 创建针对props副本的watch，通知到组件外
此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。
在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据
最终全部代码：
&div id=&app&&
&switchbtn :result=&result& @on-result-change=&onResultChange&&&/switchbtn&
&input type=&button& value=&change& @click=&change&&
Vue.component(&switchbtn&, {
template: &&div @click=&#39;change&#39;&{{myResult?&#39;开&#39;:&#39;关&#39;}}&/div&&,
props: [&result&],
data: function () {
myResult: this.result//①创建props属性result的副本--myResult
result(val) {
this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
myResult(val){
//xxcanghai 小小沧海 博客园
this.$emit(&on-result-change&,val);//③组件内对myResult变更后向外部发送事件通知
methods: {
change() {
this.myResult = !this.myResult;
el: &#app&,
result: true
methods: {
change() {
this.result = !this.result;
onResultChange(val){
this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。
4. 什么样的props适合做双向绑定？
首先要声明的是双向绑定的props肯定是不利于组件间的数据状态管理，尤其是在复杂的业务中更是如此，所以要尽可能的少用双向绑定，过于复杂的数据处理建议使用Vuex （）
但是在我们平时使用过程中又确实有props双向绑定的需求，个人认为只有在满足以下条件时再使用双向绑定的props。
组件内部需要修改props。
组件需要可以由外部在运行时动态控制，而非单纯初始化。
组件外部需要读取组件内的状态来进行处理
满足上述条件的有比如本例中的switch开关组件，需要外部控制开关状态；再比如Tab多标签页组件的activeIndex属性，需要可以由外部控制标签页当前打开哪一页等等
自动化的props双向绑定处理
Vue的mixin组件——propsync
通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦，如果有两个props需要做双向绑定上面的代码就要实现两遍，代码极其冗余。
所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync。
实现了在组件内自动创建所有prop对应的data属性，方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。
实现了组件外修改组件prop，组件内自动同步修改到data属性。
实现了组件内修改了data属性（由prop创建的），自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外
propsync的使用方法
对于编写组件时，如果需要props双向绑定，则直接引入mixin，并在配置中声明mixin即可： mixins: [propsync]
此mixin会根据prop的名称生成对应的data属性名，默认为在prop属性名前面增加&p_&，即若prop中有字段名为active，则自动生成名为p_active的data字段（props到data的名称变更方法可自行修改，详见propsync源码开头配置）
propsync默认会将所有props创建双向绑定，可通过propsync:false来声明此props不需要创建双向绑定。
import propsync from &#39;./mixins/propsync&#39;;//引入mixin文件
export default {
name: &tab&,
mixins: [propsync],//声明使用propsync的mixin
type: [String, Number],//会被propsync自动实现双向绑定，在data中创建p_active变量
type: [Number, String],
propsync:false//不会被propsync实现双向绑定
methods: {
setActive(page, index, e) {
this.p_active =//可以直接使用this.p_active
引入propsync后，会在内部双向绑定的data变更后触发一个onPropsChange事件。遂在调用组件处，增加一个事件监听 onPropsChange（可修改），当组件内修改了props时propsync会触发此事件，返回参与依次为：修改prop名称，修改后值，修改前值。可以由当前组件调用方（父组件）来决定是否要将组件内的变更同步到调用方
&tab :active=&active& @onPropsChange=&change&&&/tab&
change:function(propName,newVal,oldVal){
this[propName]=newV
console.log(&组件tab的& +propName+ &属性变更为& +newVal);
Vue的mixin组件propsync已经托管至Github：
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
父组件new Vue({
el:'#app',
ready:function(){
this.$http.get('url').then(function(data){
this.msg=//假设data=ceshi
&child msg='msg'&&/child&子组件export default {
props: ['msg'],
ready () {
this.msg //
（怎么获取？）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
老问题，this指向问题，改改：
el:'#app',
ready:function(){
this.$http.get('url').then(data =& {
首先，你之前的父组件this指向是错的，我上面的解答仍然有效。
其次，关于父组件异步获取数据，子组件在ready里拿不到的问题，通过$watch来做也不失为一种方法：
export default {
props: ['msg'],
ready () {
this.$watch('msg', function(newVal, oldVal){
console.log('newVal');//这里再感受下值拿到了没
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}