vue 兄弟组件传值

最新推荐文章于 2022-11-23 20:12:10 发布

一染星辰

最新推荐文章于 2022-11-23 20:12:10 发布

阅读量226

点赞数

分类专栏： p4 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59519449/article/details/122114107

版权

vue 同时被 2 个专栏收录

53 篇文章 12 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

思路：

思路是什么呢！！！

它和父组件传值的原理，稍微相似，假如：一个one 组件，一个 two组件； one组件需要用$on 监听， two 组件创建一个button 按钮用$emit 关键词传值等等

第一步：在静态页面：创建一个div ,然后创建一个自定义的<father></father> 标签；

第二步：在script里边创建一个空的容器 const eventBus=new Vue({})

第三步：用component 重新定义一个father 的组件名，在里边插入两个自定义标签：一个<one></one> 一个<two></two> 等等

不多说了，直接上代码吧！！！

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div class="app">
        <father></father>
    </div>


    <script>
        //创建空的容器
        const eventBus = new Vue({

        })



        //定义一个新的vue组件,就是自定义的元素
        Vue.component("father", {
            //1.组件名为father
            template: `
             <div class="father">
        我是父祖件
        <one></one>
        <two></two>
    </div>
            
            `

        })

        //定义新的组件名字
        Vue.component("one", {
            //组件名为one 
            data() {
                return {
                    oneVal: ""
                }
            },
            template: `<div class="one">
    <span>我是one组件</span>
    <h1>这是我要传入的值{{oneVal}}</h1>
</div>
            
            `,
            //相当于父子传参的 原理差不多
            //需要用$on 进行监听自定义的事件,在回调函数可以拿到数据
            mounted() {
                //mounted 在这里发送后端请求 ,拿回数据 ,配合路由
                eventBus.$on("setVal", (res) => {
                    this.oneVal = res
                })

            }
        })

        //定义一个two 
        Vue.component("two", {
            data() {
                return {
                    Val: "这是我要赋予你的能量"
                }
            },
            template: `
    <div class="two">
        <span>我是two组件</span>
        <h1>这是我要赋给你的能量 ： {{val}}</h1>
        <button @click="fn">点我传递给one 能量</button>
    </div>
            `,
            methods: {
                fn() {
                    eventBus.$emit("setVal", this.Val)
                }
            }
        })

        //创建容器其
        const vm = new Vue({
            el: ".app"
        })



    </script>





</body>

</html>