vue组件通信方式

2019-02-15 10:49 热度: 138 我说呢

总结下vue组件间通信方式方法。

vue.png

父组件向子组件通信

方法一:props

父组件vue模板:

<template>
    <child :msg='message'></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

子组件模板

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

方法二 使用$children

利用$children可以访问当前实例的直接子组件

需要注意 $children 并不保证顺序,也不是响应式的。

子组件向父组件通信

方法一 利用vue事件

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。

父组件模板

<template>
    <child @msgFunc='func'></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件

<template>
    <button @click='handleClick'>点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>

方法二 通过修改父组件传递的props来修改父组件数据

这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为引用变量是引用地址的传递,指向的同一块内存地址。

但是并不推荐这么做,并不建议直接修改props的值,如果数据是用于显示修改的,在实际开发中我经常会将其放入data中,在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦,不会因为使用同一份数据而导致数据流异常混乱,只通过特定的接口传递数据来达到修改数据的目的,而内部数据状态由专门的data负责管理。

方法三 利用$parent

非父子组件之间的数据传递

直接上代码

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

复杂的单页面数据管理

应用足够复杂的数据管理,建议使用vuex进行。

查看评论 (0条)

添加评论