返回首页 | 金赞娱乐场

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

关于Vue.js组件中通讯的问题

时间:2017-10-26 编辑:admin

写在前面

由于对Vue.js很感兴趣,并且平常作业的技能栈也是Vue.js,这几个月花了些时刻研究学习了一下Vue.js源码,并做了总结与输出。

什么是Vue金赞在线赌场组件?

组件 (Component) 是 Vue.js 最强壮的功用之一。组件能够扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它增加特别功用。在有些情况下,组件也能够是原生 HTML 元素的办法,以 is 特性扩展。

Vue组件间通讯

父组件向子组件通讯

办法一:props

运用props,父组件能够运用props向子组件传递数据。

父组件vue模板father.vue

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

<script>

import child from './child.vue';

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

子组件vue模板child.vue

<template>
    <p>{{msg}}</p>
</template>

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

办法二 运用$children

运用$children能够在父组件中拜访子组件。

子组件向父组件通讯

办法一:运用vue事情

父组件向子组件传递事情办法,子组件经过$emit触发事情,回调给父组件。

父组件vue模板father.vue

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

<script>

import child from './child.vue';

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

子组件vue模板child.vue

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

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

办法二: 经过修正父组件传递的props来修正父组件数据

这种办法只能在父组件传递一个引证变量时能够运用,字面变量无法到达相应作用。由于饮用变量终究无论是父组件中的数据仍是子组件得到的props中的数据都是指向同一块内存地址,所以修正了子组件中props的数据即修正了父组件的数据。

可是并不引荐这么做,并不主张直接修正props的值,如果数据是用于显现修正的,在实践开发中我常常会将其放入data中,在需求回传给父组件的时分再用事情回传数据。这样做坚持了组件独立以及解耦,不会由于运用同一份数据而导致数据流反常紊乱,只经过特定的接口传递数据来到达修正数据的意图,而内部数据状况由专门的data担任办理。

办法三:运用$parent

运用$parent能够拜访父组件的数据。

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

非父子组件通讯,Vue官方引荐运用一个Vue实例作为中心事情总线。

Vue内部有一个事情机制,能够参阅源码。

$on办法用来监听一个事情。

$emit用来触发一个事情。

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

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

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

多层级父子组件通讯:

在Vue1.0中完成了$broadcast与$dispatch两个办法用来向子组件(或父组件)播送(或派发),当子组件(或父组件)上监听了事情并回来true的时分会向爷孙级组件持续播送(或派发)事情。可是这个办法在Vue2.0里边现已被移除了。

之前在学习饿了么的开源组件库element的时分发现他们从头完成了broadcast以及dispatch的办法,以mixin的办法引进,具体能够参阅《说说element组件库broadcast与dispatch》。可是跟Vue1.0的两个办法完成有稍微的不同。这两个办法完成了向后代组件事情播送以及向多层级父组件事情派发的功用。可是并非广义上的事情播送,它需求指定一个commentName进行向指定组件名组件定向播送(派发)事情。

其实这两个办法内部完成仍是用到的仍是$parent以及$children,用以遍历子节点或是逐级向上查询父节点,拜访到指定组件名的时分,调用$emit触发指定事情。

杂乱的单页使用数据办理

当使用满足杂乱情况下,请运用vuex进行数据办理。

以上就是关于Vue.js组件中通讯的问题的具体内容,更多请重视其它相关文章!


浏览:

网站建设

流程

    网站建设流程