zoukankan      html  css  js  c++  java
  • Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件

    组件A中的【数据】,传递给组件B

    1.创建组件A,组件B
    2.组件B在实例创建完成时就开始监听事件【等待接收数据】:钩子
    3.组件A中触发事件,发送数据

    注意:接收数据的函数,一定要绑定在生命周期创建钩子上(created:function(){})
    1、引入相应的文件

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


    2、Dom文件

    <div id="app">
        <comp-a></comp-a>
        <comp-b></comp-b>
    </div>

    3、js的相关内容

     1 <script>
     2     Vue.component("compA", {
     3         template:"<button @click='test'>组件A中,触发事件</button>",
     4         methods:{
     5             test:function() {
     6                 bus.$emit("myevent", this.username);//$emit("事件名称",[参数列表])通过$emit在代码中触发一个事件
     7             }
     8         },
     9         data:function() {
    10             return {
    11                 username:"jerry"
    12             }
    13         }
    14     });
    15     Vue.component("compB", {
    16         template:"<h2>{{ds}}</h2>",
    17         created:function() {/*这是实例创建完成时自动调用的生命周期钩子*/
    18             var that = this;
    19             bus.$on("myevent", function(msg) {//通过$on("事件名称",function(参数列表){})来监听一个事件是否进行处理
    20                 // 接收到数据之后,就可以更新组件中使用的数据,然后展示到页面上
    21                 console.log("接收到其他组件传递的数据:" + msg);
    22                 that.ds = msg;
    23             });
    24         },
    25         data:function() {
    26             return {
    27                 ds:"hello"
    28             }
    29         }
    30     });
    31 
    32     /*定义一个消息分发中间件*/
    33     var bus = new Vue();
    34 
    35     var vm = new Vue({
    36         el:"#app"
    37     });
    38 </script>
  • 相关阅读:
    解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法
    Visual Studio Code 相关
    随机的背景图案
    将视频做为网页背景 超炫!
    gunicorn部署Flask服务
    查看mysql数据库及表编码格式
    查看修改mysql编码方式
    【ssm整合打印sql语句】
    【mybatis在控制台打印sql语句配置】
    【mybatis 的foreach的用法】
  • 原文地址:https://www.cnblogs.com/Sarah119/p/6568454.html
Copyright © 2011-2022 走看看