学习前端_vue组件_非父子级的组件间的数据传递

最新推荐文章于 2022-03-15 10:45:22 发布

啊辉的小号

最新推荐文章于 2022-03-15 10:45:22 发布

阅读量120

点赞数

分类专栏：前端学习小菜鸟学前端文章标签：前端 vue 非父子组件间数据传输

本文链接：https://blog.csdn.net/weixin_38527697/article/details/99648470

版权

小菜鸟学前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端学习

24 篇文章 0 订阅

订阅专栏

之前说过了父子级之间是如何传递数据的，接下来讲一下非父子级如何传递数据

1.创建一个空的vue实例例如：var datavue=new Vue();

2.在数据源组件上添加发射方法，将想要传送的数据发射出去例如： send(){datavue.$emit("edata",this.name) }

3.在接收数据的组件接收方法，在合适的时间监听传送过来的数据例如 datavue.$on('edata',name=>{this.name=name;}）

<!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>
  <script src="js/vue.js"></script>
</head>
<body>
    <div id="test">
        <vue_a></vue_a>
        <vue_b></vue_b>
    </div>
    <template id="vue_a">
      <div>
        <p>这是A组件</p>
        <p>A组件名字是：{{name}}</p>
        <input type="button" value="发送数据" @click='send'>
      </div>
    </template>
    <template id="vue_b">
      <div>
        <p>这是B组件</p>
        <p>B组件接收的数据是{{name}}</p>
      </div>
    </template>
    <script>
      var datavue=new Vue();    // 1建立一个空的vue组件
      var A={
        template:'#vue_a',
        data() {
          return {
            name:'奥巴马'
          }
        },
        methods: {
          send(){
            datavue.$emit("edata",this.name)     //2.使用空vue发送想要传输的数据
          }
        },
      }
      var B={
        template:'#vue_b',
        data() {
          return {
            name:''
          }
        },
        mounted() {                             //在一定的时机接收发送过来的数据
          datavue.$on('edata',name=>{
            this.name=name;
          })
        },
      }
      new Vue({
        el:'#test',
        components:{
          'vue_a':A,
          'vue_b':B
        }
      })

    </script>
</body>
</html>

啊辉的小号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端_vue组件_非父子级的组件间的数据传递

之前说过了父子级之间是如何传递数据的，接下来讲一下非父子级如何传递数据1.创建一个空的vue实例例如：var datavue=new Vue();2.在数据源组件上添加发射方法，将想要传送的数据发射出去例如：send(){datavue.$emit("edata",this.name) }3.在接收数据的组件接收方法，在合适的时间监听传送过来的数据例如datavue.$on...
复制链接

扫一扫