vue总结系列 ------ 组件之间的传值

最新推荐文章于 2022-08-08 17:49:20 发布

曾皙

最新推荐文章于 2022-08-08 17:49:20 发布

阅读量151

点赞数 1

分类专栏： vue系列总结文章标签： vue

本文链接：https://blog.csdn.net/qq_39148344/article/details/88963581

版权

vue系列总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原因

半年前开始学Vue学到了今天，也没有机会好好整理一下自己的知识点，因为上公司的项目不是依赖于Vue，还是在用JQ,和文件之间来传递代码，所以其实在对vue的学习成面上来讲对我的帮助并不大，来了新的一家公司，觉得吧自己会的东西全部整理一下，第一篇---组件之间的传值

一般书上都先说父向子传递，为什么我们要先说这个呢？为什么呢？因为其他的书上都是这样讲的？对其他书，博客都是先写这个我认为不对，虽然这个是看上去简单，注意是看上去，所以我们先讲的是 -- 组件之间的传值，为什么我们要这样呢？因为既然是总结就要先主线在分支，那有人就要说了-父向子传递是特殊的分支吗？答案是的？所以我们先讲 -- 组件之间的传值

以下是在非vue脚手架的情况下操作的

组件之间的传值

我们在不管他们2个组件之间是什么关系，我们就是说出现了2个组件，我们直接要传值我们要怎么办呢？

我们要自定义事件，在通过事件之间的传递参数来达到我们想要的效果

那我们先来学习自定义事件：

this.$emit('my-event')  对
this.$emit('myEvent')   错

但是我们需要注意的是这里事件名字不可以用camelCase驼峰式的写法，因为：

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成v-on:myevent——导致 myEvent 不可能被监听到；而不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，就直接使用了 ----vue官网

我们知道了自定义事件，那么我们就要去监听这个事件：

监听用$on()

这里要解释一下他们直接的关系：就是在某一个地方，写了自定义事件这一行代码，那么我们就立马执行监听这个事件的函数

自定义事件：第一的参数是自定义事件名，第二的是传递的参数

监听事件：第一个参数是监听的事件名，第二个是需要执行的函数，方法

（下面有案例）

大家想一下我们可以用一个对象来又存自定义事件，又存监听这个事件：也就中央事件总线（中介）

我们可以来看一个案例，大家可以ctrl+c看一下效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style>
  .father {
    cursor: pointer;
  }
</style>
<body>

  <div id="app">
    <father :count="2"></father>
    <father :count="3"></father> <!-- //定义的时候名称不区分大小写 -->
    <div>{{totol}}</div>
  </div>

  <script src="js/vue.js"></script>
  <script>
    var Event = new Vue();
    Vue.component('father', {
      props: ['count'],
      template: `
		<div class = "father">
		    <p @click = 'addCount'>{{getCount}}</p>
		</div>
	`,
      data: function () {
        return {
          getCount: this.count,
        }
      },
      methods: {
        addCount: function () {
          ++this.getCount;
          Event.$emit('sendclick', 1);
        }
      },
    })
    new Vue({
      el: '#app',
      data: {
        totol: 5,
      },
      mounted: function () {
        self = this;  //作用域的问题，这里的作用域变成了Event这个对象
        Event.$on('sendclick', function (data) {
          self.totol += data;
        });
      }


    })
  </script>
</body>

</html>

这个是一个小demo:每点击一下数字数字加1，2个数他们就重新相加的一个案例

首先我们要知道：定义和监听必须的在同一个对象上或父子组件

在上面的代码定义的是father的子组件作用域，监听的是全局作用域，由于是在不用的作用域所以定以一个相同的作用域的对象，并且拥有vue对象的方法

这里就是当我们的数字加1了我们就会1触发自定义的$emit,那么系统就会去找是否有人监听了$emit中的这个事件，如果有就会发生执行 $on中的函数，这里需要注意的是，这里触发的函数中的this是我们定义的Event这个对象，而不是我们new Vue({})的那个对象，所以this要转换一下

子向父亲（全局）传递值，

我们在来看看特殊的，同样一个demo,但是因为是子向父亲传递值的另一种写法（观察者模式）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style>
  .father {
    cursor: pointer;
  }
</style>

<body>

  <div id="app">
    <father :count="2" @sendclick="send"></father>
    <father :count="3" @sendclick="send"></father> <!-- //定义的时间名称不区分大小写 -->
    <div>{{totol}}</div>
  </div>

  <script src="js/vue.js"></script>
  <script>
    Vue.component('father', {
      props: ['count'],
      template: `
			<div class = "father">
				<p @click = 'addCount'>{{getCount}}</p>
			</div>
			`,
      data: function () {
        return {
          getCount: this.count,
        }
      },
      methods: {
        addCount: function () {
          ++this.getCount;
          this.$emit('sendclick', 1);
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        totol: 5,
      },
      methods: {
        send: function (data) {
          this.totol += data;
        }
      }
    })
  </script>
</body>

</html>

这里就是说我们子组件自定义了一个事件sendclick,在我们父组件上可以直接用@sendclick来监听他，带到了相同的效果

因为是父子组件所以可以直接监听

平行的组件传值

也可以用上面的中央事件总线的写法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="app">
    <module></module>
    <analysis></analysis>
  </div>
  <script src="js/vue.js"></script>
  <script>
    //定义一个中央事件总线
    var Event = new Vue();
    Vue.component('module', {
      template: `
	    <div>
		我说:<input @keyup = 'on_changes' type='text' v-model = 'aa'>
	    </div>	
		`,
      data: function () {
        return {
          aa: ''
        }
      },
      //$emit : Event触发一个事件chaunz名,传过去了this.aa的参数,后面的$on接收到了反应,触发了回调函数
      methods: {
        on_changes: function () {
          Event.$emit('chaunz', this.aa);
        }
      }

    })
    Vue.component('analysis', {
      template: `
			<div>
				花花他说了:<p>{{huahua_said}}</p>
			</div>	
			`,
      data: function () {
        return {
          huahua_said: ''
        }
      },
      mounted: function () {
        self = this;
        // 作用域变了
        Event.$on('chaunz', function (data) {
          self.huahua_said = data;
        })
      }

    })
    new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

</body>

</html>

大家可以ctrl+c看下其实是很好理解的就是一个触发了，一个就立马监听，在注意一下事件的作用域就好了

父亲向子传递值

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>父子组件之间的传递</title>
</head>

<body>
  <div id="app">
    <father :itme='list'></father>
  </div>
  <script src="js/vue.js"></script>
  <script>
    Vue.component('father', {
      props: ['itme'],
      template: '<div><li v-for = "lis in itme">{{lis}}</li></ul>',

    });
    var app = new Vue({
      el: "#app",
      data: {
        list: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })


  </script>

</body>

</html>

这里大家需要注意的是这里父亲向子传递的是属性中的值（属性值），那么需要传递的属性名称写在props这个属性值中的数组中

曾皙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue总结系列 ------ 组件之间的传值

原因半年前开始学Vue学到了今天，也没有机会好好整理一下自己的知识点，因为上公司的项目不是依赖于Vue，还是在用JQ,和文件之间来传递代码，所以其实在对vue的学习成面上来讲对我的帮助并不大，来了新的一家公司，觉得吧自己会的东西全部整理一下，第一篇---组件之间的传值一般书上都先说父向子传递，为什么我们要先说这个呢？为什么呢？因为其他的书上都是这样讲的？对其他书，博客都是先写这个我认为不对...
复制链接

扫一扫

专栏目录