前端学习-Vue.js子组件与父组件相互传递数据

1.父组件向子组件传递数据的方式

1.子组件使用props

//子组件
let Child = {
    props: ['title']
}

//父组件
let Parent = {
    template: `
        <child :title="number"></child>
    `,
    data() {
        return {
            number: 1
        }
    },
    components: {
        Child
    }
}

2.子组件向父组件传递数据

2.1 直接修改props中的某个值

借用.sync修饰符以及$emit(‘update:xxx’);

//子组件
let Child = {
    props: ['title'],
    methods: {
        onUpdateClick: function () {
            this.$emit('update:title',100);
        }
    }
}

//父组件
let Parent = {
    template: `
        <child :title.sync="number"></child>
    `,
    data() {
        return {
            number: 1
        }
    },
    components: {
        Child
    }
}

2.2 呼叫父组件的对应方法来执行

使用$emit(‘事件的名称’,要传递的参数);

//子组件
let Child = {
    props: ['title'],
    data() {
        return {
            name: '张三',
            age: 24
        }
    },
    methods: {
        onUpdateClick: function () {
            //自定义事件
            this.$emit('update-data',this.name,this.age);
        }
    }
}

//父组件
let Parent = {
    template: `
        <child :title.sync="number" @update-data="updateInfoCallback"></child>
    `,
    data() {
        return {
            number: 1
        }
    },
    components: {
        Child
    },
    methods: {
        updateInfoCallback: function (name,age) {
            //执行某些复杂的逻辑
        }
    }
}