vue 组件递归，非父子间组件通信简单实例

最新推荐文章于 2024-03-13 16:23:55 发布

乐橙Web

最新推荐文章于 2024-03-13 16:23:55 发布

阅读量938

点赞数

分类专栏： vue 文章标签： vue.js 组件递归非父子组件通信

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/77881347

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUE虽说相比于其他两大框架来说简单易上手些，但文档中仍是有些例子有点简单，下面就写出组件递归和非父子组件通信以供大家参考。

组件递归：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>递归组件简单实例</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <div>Hello Summmer</div>
        <span>Number:</span>
        <exa-ecomponent :number="0"></exa-ecomponent>
    </div>
    <script type="text/javascript">
        Vue.component('exa-ecomponent', {
            name: 'exa-ecomponent',
            template: '<span><span>{{number}}</span><exa-ecomponent :number="number+1" v-if="currentNum"></exa-ecomponent></span>',
            props: ['number'],
            computed: {
                currentNum: function () {
                    return this.number < 10
                }
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

非父子间组件通信：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>非父子间组件通信简单实例</title>
</head>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>

<body>
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>

</body>
<script>
    var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

    Vue.component('component-a', {
        template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件
        data() {
            return {
                masgA: 0
            }
        },
        methods: {
            incrementB: function () {
                bus.$emit('incrementB')
            }
        },
        mounted: function () {
            var _this = this
            bus.$on('incrementA', function () {
                _this.masgA++
            })
            bus.$on('incrementA', function () {
                this.masgA++
            })
        }
    })

    Vue.component('component-b', {
        template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
        data() {
            return {
                masgB: 0
            }
        },
        methods: {
            incrementA: function () {
                bus.$emit('incrementA')
            }
        },
        mounted: function () {
            bus.$on('incrementB', function {
                this.masgB++
            })
        }
    })

    var vm = new Vue({
        el: "#app"
    })

</script>

例子中已经很清楚的描述用法，如有不懂的地方，欢迎留言交流~

乐橙Web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件递归，非父子间组件通信简单实例

VUE虽说相比于其他两大框架来说简单易上手些，但文档中仍是有些例子有点简单，下面就写出组件递归和非父子组件通信以供大家参考。组件递归：递归组件简单实例 Hello Summmer Number: Vue.compo
复制链接

扫一扫

专栏目录