知道vue组件同级传值吗？

青旅半醒 2021-09-19 07:40 236阅读 0赞

<!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>
    <body>
        <div id="app">
            <son1></son1>
            <son2></son2>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script> let nullVm=new Vue(); var vm=new Vue({ el:"#app", components:{ "son1":{ data(){ return { mes:[1,2] } }, template:"<p @click='get'>send</p>", methods: { get(){ nullVm.$emit("s1",this.mes) } }, }, "son2":{ template:"<p><p>", mounted(){ // let that=this; nullVm.$on("s1",function (params) { console.log(params) }) }, } } }) /* 一般同级传递都是指的是子组件与子组件之间的传递，因为父亲只有一个，那就是Vue实例。 如果想把son1的数据传给son2, 这里需要创建一个空实例Vue对象,然后利用事件方法$emit("自定义参数名"，"需要传递的数据")， 然后将空对象这个$emit(),整体写在函数内。这样他的数据就会传出去了。谁来接受呢？另一个同级组件需要用钩子函数mounted，这个钩子函数的意思是初始化页面完成后，再对html的dom节点进行一些需要的操作。 在mounted钩子函数内，用空实例Vue对象调用$on("上一个组件的自定义参数名"，"回调函数")。 */ </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件传值

父组件向子组件传值通过`v-bind` ![在这里插入图片描述][20200223152103416.png] 子组件向辅助间传值通过`this.$emit()`

逃离我推掉我的手/ 2023年07月07日 12:36/ 0 赞/ 10 阅读

相关 Vue组件传值回顾

1. 兄弟组件之间传值实现步骤： 1. 定义模块 src/bus.js ,内容是导入 Vue模块并且导出vue实列对象 import Vue from '

红太狼/ 2023年07月04日 15:59/ 0 赞/ 12 阅读

相关 Vue组件传值

子组件中，默认情况下无法访问到父组件中data上的数据和methods中的方法父组件向子组件传值 1. 定义子组件，props中设置需要父组件传入的参数名 2.

末蓝、/ 2023年06月26日 12:27/ 0 赞/ 13 阅读

相关 vue组件传值

> 1. 计算属性和方法的区别：计算属性中不会添加重复内容；方法添加会重复添加 > 2. 生命周期中的销毁：普通的显示隐藏`v-show`并不是销毁,只是将元素隐藏 > 3

た入场券/ 2023年06月15日 14:25/ 0 赞/ 10 阅读

相关 Vue组件之间传值

文章目录一、父组件向子组件传递数据二、子组件向父组件传递数据三、子组件向子组件传递数据一、父组件向子组件传递数据

柔情只为你懂/ 2023年02月19日 13:28/ 0 赞/ 14 阅读

相关 vue 组件传值

父传子一、父传子 1.分发事件props和$emit(方法1) 2.$ listeners和$ attrs(方法2

妖狐艹你老母/ 2022年12月15日 03:39/ 0 赞/ 227 阅读

相关 vue 组件间传值

1、父组件给子组件传值父组件： <template> <child :name="name"></child> </template>

末蓝、/ 2022年04月08日 11:13/ 0 赞/ 337 阅读

相关知道vue组件同级传值吗？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2021年09月19日 07:40/ 0 赞/ 237 阅读

相关 vue组件传值

vue组件传值-------总结 1·父组件传值子组件父组件通过 :paramsName1="params1" :paramsName2="params2"的方式将值

绝地灬酷狼/ 2021年09月17日 04:50/ 0 赞/ 471 阅读

相关 vue组件传值大全

组件传值大全 props:父传子父组件的子标签加 `:name='name'` 子组件添加`props: ['name']`，然后直接用name就行了，不用在da

╰半夏微凉°/ 2021年08月28日 20:08/ 0 赞/ 438 阅读