非父子组件之间传值

最新推荐文章于 2024-07-24 16:53:23 发布

学会改变Lxw

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量169

点赞数

分类专栏： Vue学习笔记记录文章标签： vue html

本文链接：https://blog.csdn.net/lxw88586390/article/details/107098688

版权

Vue学习笔记记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通过总线机制完成相应的功能

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

<head>
    <meta charset="UTF-8">
    <title>非父子组件之前传值</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <child content="hello"></child>
        <child content="world"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            data: function () {
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: String
            },
            template: '<div @click="handelClick">{{selfContent}}</div>',
            methods: {
                handelClick: function () {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function () {
                var this_ = this
                this.bus.$on('change', function (msg) {
                    this_.selfContent = msg
                })
            }
        })

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

</html>

学会改变Lxw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非父子组件之间传值

通过总线机制完成相应的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件之前传值</title> <script src="./vue.js"></script></head><body> <div id="app">
复制链接

扫一扫

专栏目录