首页 > 其他分享 >vue平级访问数据

vue平级访问数据

时间:2023-11-12 17:57:24浏览次数:29  
标签:vue Bus 访问 export msg import 平级 sent

<template>
  <div class="a">
    <h2>this is A</h2>
    <span>{{ msg }}</span>
  </div>
</template>

<script>
import Bus from '../Tools/EventBusTool';
export default {
    data(){
        return{
            msg:''
        }
    },
    created(){
        Bus.$on('sent',(msg) =>{
            this.msg=msg
        })
    }
}
</script>

<style>
.a{
  border: 100px;
  background-color: aqua;
}
</style>
<template>
  <div class="b">
    <h2>this is B</h2>
    <button @click="sent">sent</button>
  </div>
</template>

<script>
import Bus from '../Tools/EventBusTool';
export default {
    methods:{
        sent(){
            Bus.$emit('sent','需要发送的消息')
        }
    }
}
</script>

<style scoped>
.b{
  border: 100px;
}
</style>
eventBusTool
import Vue from "vue";
const Bus=new Vue()
export default Bus

 

标签:vue,Bus,访问,export,msg,import,平级,sent
From: https://www.cnblogs.com/wllovelmbforever/p/17825810.html

相关文章

  • vue跨层访问数据
    <template><divclass="grf">thisisgrandpa<FatherComponent></FatherComponent></div></template><script>importFatherComponentfrom'./FatherComponent.vue';exportdefault{......
  • vue封装一个加载过程
    app.vue<template><divclass="main"><divclass="box"v-isLoging="isLoged"><ul><liv-for="iteminlist":key="item.id"class="news">......
  • vue项目部署添加时间
    constfs=require('fs');constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');classBuildTimePlugin{ apply(compiler){  constbuildTime=+newDate()  compiler.hooks.beforeCompile......
  • vue无法正确使用mastache渲染实例
    问题:<script>varvm=newvue({el:"#app",data:{message:"hello,vue!"}});</script>这段代码中,`vm`是通过`newVue()`创建的一个Vue实例。但是在HTML文件中,`<divid="app">`元......
  • Vue中的插槽
    插槽-默认插槽作用:让组件内部的一些结构支持自定义需求:要在页面中显示一个对话框,封装成一个组件,但是组件的内容部分,不是写死的,希望能使用时自定义。插槽的基本语法组件内需要定制的结构部分,改用<slot></slot>占位使用组件时,在组件中传入结构替换slot,例如<组件名>xxxxxx</组......
  • Vue 实验
    项目初始化#前提:包管理器安装vue-clivuecreate项目名称Vue2实验目的了解Vue2的组件实现机制数据绑定机制双向绑定:input单向绑定父组件→子组件:父组件传入的参数组件→用户:页面内部参数属性监听机制:被监听的参数实验内容实现一个简单的组件,体现......
  • JVM系列-第7章-对象的实例化内存布局与访问定位-cnblog
    title:JVM系列-第7章-对象的实例化内存布局与访问定位tags:-JVM-虚拟机categories:-JVM-1.内存与垃圾回收篇keywords:JVM,虚拟机。description:JVM系列-第7章-对象的实例化内存布局与访问定位。cover:'https://gitee.com/youthlql/randombg/raw/master/lo......
  • vue自定义指令
    app.vue<template><divclass=""><!--自定义指令全局<inputv-focustype="text"name=""id=""><br>自定义指令局部<inputv-focus2type="text"name=""id="&......
  • Vue自定义指令
    自定义指令根据自定义的指令,可以封装一些dom操作,扩展额外的功能全局注册-语法全局注册是在min.js文件中去定义的Vue.directive('指令名',{//inserted:钩子是一个自定义指令的生命周期钩子函数之一。它会在被绑定的元素插入到父节点时调用。"inserted"(el){......
  • vue项目配置国际化
    1、安装vue-i18n+js-cookie插件npminstallvue-i18n-Snpminstalljs-cookie--save即在package.json中dependencies节点添加vue-i18n"vue-i18n":"7.3.2",2、配置多语言文件src目录下创建lang目录,存放国际化文件此处包含三个文件,分别是index.jszh.jsen.js//index.jsim......