非父子组件的数据传递

末蓝、 2022-06-09 12:40 237阅读 0赞

复制代码可以直接查看效果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css"> </style>
    </head>
    <body>
        <div id="app">
        //定义两个组件
            <foo></foo>
            <bar></bar>
        </div>
        <script type="text/javascript"> var bus = new Vue() var foo = { render: function(creatElement){ return creatElement( 'button',{ on:{ click:this.addBar } //设置默认值为count },this.count ) }, //这里data必须为函数就不多说了 data: function(){ return { count: 0, } }, methods: { addBar: function(){ //执行incrementBar事件，注意是事件，不是方法，因为Vue中可以自定义事件 bus.$emit("incrementBar") } }, mounted: function(){ //在钩子函数中注册事件，注意这里一定要使用var _this=this。因为这里的this是实例化的对象，而里面的this是注册事件中的上下文 var _this = this bus.$on('incrementFoo',function(id){ _this.count++ }) } } var bar = { render: function(creatElement){ return creatElement( 'button',{ on:{ click: this.addFoo } },this.count ) }, data: function(){ return { count: 0 } }, methods: { addFoo: function(){ bus.$emit("incrementFoo") } }, mounted: function(){ var _this = this bus.$on('incrementBar',function(){ _this.count++ }) } } var app = new Vue({ el: "#app", data: { count: 0, }, methods: { }, components: { 'foo': foo, 'bar':bar } }) </script>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue父子组件之间传递数据

父向子：v-bind()+props 父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。父组件代码如下： <template>

怼烎@/ 2023年09月28日 11:59/ 0 赞/ 131 阅读

相关 Vue父子组件、子父组件、非父子组件通信

1、父子组件传值通信，在子组件中使用props属性，静态或者动态传递父组件的变量值 <template> <div id="app"> <

红太狼/ 2023年06月06日 03:51/ 0 赞/ 21 阅读

相关 Vue 非父子组件传递值

第一种传值方式，通过事件总线其实就是通过一个公共的js文件，专门用来传递消息创建 src/util/bus.js import Vue

淡淡的烟草味﹌/ 2023年05月31日 06:48/ 0 赞/ 14 阅读

相关非父子组件的数据传递

复制代码可以直接查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

末蓝、/ 2022年06月09日 12:40/ 0 赞/ 238 阅读

相关父子组件的数据传递

<counter :count="0"></counter> <counter :count="1"></counter>加冒号0是数字，不加冒号0是字符父组件向

冷不防/ 2022年05月25日 13:59/ 0 赞/ 239 阅读

相关 Vue开发非父子组件间的数据共享、传递、缓存

通过自己的学习Vue开发总结啦分父子组件间的数据共享、传递、缓存等有以下几种方式，工大家参考。 1. Vue的事件广播以及事件的监听具体实现流程如下: ① 定义一个 Vue

比眉伴天荒/ 2022年05月22日 07:09/ 0 赞/ 331 阅读

相关 Vue父子组件数据传递

父组件向子组件传值,通过props，单项绑定，只能传值给子组件，防止改变父组件的值 1、父组件 <template> <Child :info=

妖狐艹你老母/ 2022年04月27日 23:12/ 0 赞/ 276 阅读

相关 vue父子组件间互相传递数据

vue父子组件间传递参数 1.父传子使用 props 向子组件传递数据。在父组件中定义 hMsg参数，v:bind 绑定childMsg的值为hMsg；子组

心已赠人/ 2021年11月02日 06:58/ 0 赞/ 424 阅读

相关 react父子组件数据传递

子传父 1.首先父组件设定一个自定义函数 getChildDatas = (values) => { //...业务代码 } 2.将该

雨点打透心脏的1/2处/ 2021年10月01日 02:28/ 0 赞/ 428 阅读

相关 ue父子组件的数据传递示例

地址：[http://www.jb51.net/article/107744.htm][http_www.jb51.net_article_107744.htm] 转载于:h

男娘i/ 2021年09月30日 12:34/ 0 赞/ 527 阅读