Vue 使用篇(二)：Vue父子组件间的数据传输

一、问题1

1、问题描述：

我们通常习惯在组件的mounted阶段对要显示的数据进行一定的处理然后渲染页面。但是子组件在其mounted阶段无法获取父组件的异步数据以及父组件的mounted所创建的数据。

2、原因

• 父组件的异步数据必须等待其内部执行完毕之后才会被触发，具有一定的滞后；子组件是在父组件创建的同时紧跟着创建的，所以此时去获取父组件的异步数据内部还没有执行完毕，将获取到null。
• 根据父子组件生命周期执行的顺序，父组件的mounted是在子组件mounted执行完毕后才执行的，因此子组件在其mounted阶段无法获取父组件的mounted所创建的数据。

3、解决方案

为这些数据在子组件中设置watch。当数据更新时将触发操作。

4、示例代码

//vue父子组件间的数据传输-问题一：
    父组件mounted中创建的数据或异步数据，子组件mouted中无法获得
// 子组件
Vue.component('child',{
    template:'<h1>child</h1>',
    props:['object','asyncData'],
    mounted () {
        console.log('child mounted object',this.object) // null
        console.log('child mounted asyncData',this.asyncData) // null
    },
    // 解决方案：添加watch
    watch: { 
        object (newOb) {
            console.log('child watch object',nob)
        },
        asyncData (newData) {
            console.log('child watch asyncData',ndata)
        }
    }
})
// 父组件
new Vue({
    el: '#app',
    template: `
        <div id='parent'>
            <child :object='object' :asyncData='asyncData'></child>
        </div>
    `,
    data: {
        object: null,
        asyncData: null
    },
    mounted () {
        setTimeout(() => this.asyncData = 'asyncData',1000)
        this.object = {age :18}
    }
})
复制代码

See the Pen vue父子组件间的数据传输-问题一 by madman0621 ( @madman0621) on CodePen.

二、问题2

1、问题描述：

子组件设置watch监听父组件传输来的数据对象，但是当父组件改变数据对象中的某一个值时，子组件的watch并不会触发。

2、原因

子组件设置watch监听父组件传输来的数据对象时，只有当这个数据对象setter时才会触发子组件的watch，即只有给这个数据对象重新赋值才会触发子组件的watch，如果仅仅是修改数据对象中的某个属性，不会触发子组件的watch。

3、解决方案

为子组件的watch添加deep:true属性

4、示例代码

// 子组件设置watch监听父组件传输来的数据对象，
   但是当父组件改变数据对象中的某一个值时，子组件的watch并不会触发。
// 子组件
Vue.component('child',{
    template:'<h1>{{ age }}</h1>',
    props:['object'],
    data () {
        return {
            age : null
        }
    },
    watch: { 
        object: {
            //解决方案
            deep:true,  
            handler (nob) {
                this.age = nob.age
            }
        }
    }
})
// 父组件
new Vue({
    el: '#app',
    template: `
    <div id='parent'>
        <child :object='object'></child>
        <button @click='change'>改变父组件的object</button>
    </div>
  `,
    data: {
        object: null
    },
    mounted () {
        this.object = {age: 18}
    },
    methods: {
        change () {
            this.object.age = 20
        }
    }
})
复制代码

See the Pen vue父子组件间的数据传输-问题二 by madman0621 ( @madman0621) on CodePen.

转载于:https://juejin.im/post/5c95efd4f265da60c6038fc9