前言

vue是单页面应用,所有的元素都会在一个浏览器窗口展现,而一个浏览器页面内可能会包含多个元素(组件),出于组件化开发思想和后期可维护性考虑,组件是vue页面最常见的页面元素,我们在开发的时候需要把某些数据传递给其他组件,在vue的官方文档中提供了这种将组件的数据传递给其他组件的API,这篇文章我们就来说说关于vue的组件通讯的多种方式。

组件的等级

vue中不同的组件他的等级(也可以说地位、辈分等会比较好理解一点)也是不同的,只有知道他们的等级才能判断应该选择什么方式去通讯并传值。

通常在一个vue文件中import另一个组件时,这时候被引入的组件被定义为子组件,而当前这个组件就被称为父组件。

通常在一个vue文件中import两个组件时,这时候被引入的这两个组件需要通讯时,就被定义为兄弟组件。

通常在一个vue文件中import多个拥有以上关系的组件时,当前这个组件被定义为曾组件,而被引入的层层嵌套的组件就被定义为孙组件。

心里有了这个概念,后面理解组件通讯的方式应该会比较明朗。

二次封装

开发中我们会直接在页面中使用组件库里的组件,这样可以提高我们的开发效率,减少非必要的工作量,但是大多数情况下我们都会对组件库里的组件进行二次封装,以便增强其可扩展性与可维护性。这时候我们在封装组件时就要将数据传递出去。达到界面功能和数据的交互。

props 传参

props传参被用作父组件给子组件传参。

这里编辑标签内容数据从父组件传递给子组件,这里的数据是单向流(大多数情况,子组件不能修改父组件传递过来的数据,少数情况修改)。

props传参有多种方式


// 第一种子组件接收数组的方式
props: [user,age,sex]

// 第二种子组件接收对象的方式
props: { user: String, age: Number }

// 第三种子组件接受对象嵌套对象的方式
props: {
   userName: {
           type: String,
           default: "泰戈尔",
       required: true,
       validator(val) { return val === "tiger"
   }
}

上面第三种方式支持4种属性,但是并不是必填的,

父组件传参方式

父组件传参时分为两种类型

1:静态属性传参

ps:1:在不定义props类型的情况下,props接收到的都是String类型。

// 父组件
<template>
  <div id="father">
      <div>父组件</div>
      <!-- 三、子组件:通过占位符添加特性的方式来传参 -->
      <Son
        username="泰戈尔"
        :height="180"
        sex="男"
      ></Son>
  </div>
</template>
//子组件
<template>
  <div id="Son">
    <span> 这是子组件 </span>
    //父组件的数据直接可以拿来渲染
    <p>身高:{{height}}</p><p>名字:{{username}}</p>
  </div>
</template>
<script>
  export default {
       props:['username','height','sex'],
</script>

2:动态属性传参

// 父组件
<template>
  <div id="father">
      <div>我是父亲,我通过 props 给儿子传参</div>
      <!-- 四、调用子组件 ,传动态参数-->
      <Son
        :query-Data="data"
      ></Son>
  </div>
</template>
//子组件
<template>
  <div id="Son">
    <span> 子组件 </span>
    <!-- 二、在 节点中显示 -->
    <p>身高:{{queryData}}</p>
    <button @click="getPropsFn">点击我获取父亲传给我的参数</button>
  </div>
</template>
<script>
  export default {
      props: {
         queryData: {
        type:Object,
            default(){
              return {},
            }
      }
</script>

$emit 传参

$emit这种传参方式是子组件向父组件传参时用到的,我们通常在子组件中将需要传递的数据通过事件的形式向父组件传递,比如我们在子组件的template中的某个dom上注册了一个click事件,而我们在script中在该事件的函数中执行一些操作,然后我们可以将数据通过this.$emit('向父组件传递的事件名',向父组件传递的数据)

//子组件
<template>
    <div @click="queryDataList"> </div>
</template>
<script>
   methods: {
       queryDataList() {
             this.$emit("initQueryListData", list)
       }
   }
</script>
//父组件
<template>
    <div @initQueryListData="handleQueryList"> </div>
</template>
<script>
   methods: {
       handleQueryList(list) {
             console.log(list)
       }
   }
</script>
最后修改:2021 年 10 月 15 日 09 : 40 AM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。