2024年前端最全vue组件之间通信方式汇总，2024年最新面试高手过招

于 2024-05-12 18:59:14 发布
阅读量891 收藏 13
点赞数 20
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84619287/article/details/138763577
版权

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

2.1代码展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },
  provide() {
    return {
      age : this.age,
      person: this.person
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    reciveInfo(info) {
      this.fatherInfo = info;
    }
  }
}
</script>



<template>
  <div>
    <!-- 这是子组件 -->
    <div>这是子组件，接收父组件的数据传递,age的值是:{{this.age}}</div>
    <div>这是子组件，接收父组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 />
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  inject:["age", "person"],
  components: {
    Hello1
  }
}
</script>




<template>
  <!-- 这是父组件 -->
<div >
  <div>这是孙组件，接收组件的数据传递,age的值是:{{this.age}}</div>
  <div>这是孙组件，接收组件的数据传递,person的值是:{{person.name}} --- {{person.address}}</div>
</div>
</template>

<script>

export default {
name: 'Hello1',
inject: ["age", "person"]

}
</script>
<style>

</style>
2.2过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3provide和inject响应式写法

上面的写法有个问题，如果你只是针对非基本数据类型的某个属性进行修改，修改后所有的地方都会进行改变，但是改变基本数据类型后改变整个对象后，组件本身会改变，但是其他不会随之改变，会造成数据不一致问题。

2.3.1 问题展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>
    <div>
      <button @click="change1">父组件中修改provide传递的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },
  provide() {
    return {
      age : this.age,
      person: this.person
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    change1() {
      this.age = 19;
      this.person.name = "李四";
    }
  }
}
</script>

在这里插入图片描述
在这里插入图片描述

2.3.2 解决方式
2.3.2.1 代码展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>父组件中接收子组件的数据fatherInfo的值是:{{this.fatherInfo}}</div>
    <div>
      <button @click="change1">父组件中修改provide传递的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },
  provide() {
    return {
      age : () => this.age,
      person: () => this.person
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    change1() {
      this.age = 19;
      this.person.name = "李四";
    }
  }
}
</script>



<template>
  <div>
    <!-- 这是子组件 -->
    <div>这是子组件，接收父组件的数据传递,age的值是:{{this.age()}}</div>
    <div>这是子组件，接收父组件的数据传递,person的值是:{{person().name}} --- {{person().address}}</div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 />
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  inject:["age", "person"],
  components: {
    Hello1
  }
}
</script>




<template>
  <!-- 这是孙组件 -->
<div >
  <div>这是孙组件，接收组件的数据传递,age的值是:{{this.age()}}</div>
  <div>这是孙组件，接收组件的数据传递,person的值是:{{person().name}} --- {{person().address}}</div>
</div>
</template>

<script>

export default {
name: 'Hello1',
inject: ["age", "person"]

}
</script>
<style>

</style>
2.3.2.2 过程分解

在这里插入图片描述
在这里插入图片描述

2.3.2.3 使用备注

当我们后代组件想修改inject接收的数据时，如果是响应式的书写方式，那么无法提供修改方式(可以通过下面的$listeners去源头进行修改)；如果是非响应式的书写，对于非基本数据类型来说，只是改变对象里面的某个属性是可以的，但是这种修改会很难知道是哪个组件对属性进行了修改，比较难以追踪，需要谨慎。其他的不建议修改，会造成数据不一致。

方式3： p a r e n t 和 parent和 parent和children

这种方式很直接，将整个实例都获取去直接操作， c h i l d r e n 是当前组件的直接子组件实例 ; children是当前组件的直接子组件实例; children是当前组件的直接子组件实例;parent是当前组件的父组件实例，可以实现父组件及其后代组件上数据之间的传递。这种方式是获取组件本身的对象，与组件之间引用放置的顺序由很大关联，当改变组件引用的顺序时，需要同时修改获取原组件的下标，使用时需要谨慎考虑。

3.1代码展示
3.1.1 $children修改后代组件数据
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>
      <button @click="change1">修改后代组件的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },

  components: {
    HelloWorld
  },
  methods: {
    change1() {
      this.$children[0].info = "修改子组件的数据";
      this.$children[0].$children[0].count = "修改孙组件的数据";
    }
  }
}
</script>



<template>
  <div>
    <!-- 这是子组件 -->
    <div>这是子组件,nfo的值是:{{this.info}}</div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 />
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  components: {
    Hello1
  },
  methods: {
    change2() {
    }
  }
}
</script>




<template>
  <!-- 这是孙组件 -->
<div >
  <div>这是孙组件，count的值是:{{this.count}}</div>
 
</div>
</template>

<script>

export default {
name: 'Hello1',
data() {
  return {
    count : "孙组件数据"
  }
}
}
</script>
<style>

</style>
3.1.2 过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2.1 $parent修改先辈属性值
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },

  components: {
    HelloWorld
  },
  methods: {
    change1() {
      this.$children[0].info = "修改子组件的数据";
      this.$children[0].$children[0].count = "修改孙组件的数据";
    }
  }
}
</script>



<template>
  <div>
    <!-- 这是子组件 -->
    <div>这是子组件,nfo的值是:{{this.info}}</div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 />
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  components: {
    Hello1
  },
  methods: {
    change2() {
    }
  }
}
</script>




<template>
  <!-- 这是孙组件 -->
<div >
  <div>这是孙组件，count的值是:{{this.count}}</div>
  <div>
    <button @click="change3">修改后先辈组件的值</button>
  </div>
</div>
</template>

<script>

export default {
  name: 'Hello1',
  data() {
    return {
      count : "孙组件数据"
    }
  },
  methods: {
    change3() {
      debugger;
      this.$parent.info ="修改直接父辈组件的值";
      this.$parent.$parent.age = 20;
    }
  },
}
</script>
<style>

</style>
3.2.2 过程分解

在这里插入图片描述

方式4： r e f 和 ref和 ref和refs

这种方式和方式三一样是获取组件实例本身去操作。在组件上添加一个ref属性，给与这个组件一个标志，通过该标志去获取组件本身的实例，相比较与方式三需要确定组件的引用顺序，该方式没有该苦恼，但是在给ref值的时候注意值不要重复。同时没有办法通过$ref去获取父类对象，这点是相比较于方式三的缺陷。

4.1代码展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>
      <button @click="change1">修改后代组件的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld ref="helloWorld"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },

  components: {
    HelloWorld
  },
  methods: {
    change1() {
      debugger;
      this.$refs.helloWorld.info = "修改子组件的值";
      this.$refs.helloWorld.$refs.hello1.count = "修改孙组件的值";
    }
  }
}
</script>


<template>
  <div>
    <!-- 这是子组件 -->
    <div>这是子组件,nfo的值是:{{this.info}}</div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 ref ="hello1"/>
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  components: {
    Hello1
  },
  methods: {
    change2() {
    }
  }
}
</script>




<template>
  <!-- 这是孙组件 -->
<div >
  <div>这是孙组件，count的值是:{{this.count}}</div>
</div>
</template>

<script>

export default {
  name: 'Hello1',
  data() {
    return {
      count : "孙组件数据"
    }
  },
  methods: {
   
  },
}
</script>
<style>

</style>
4.2 过程分解

在这里插入图片描述
在这里插入图片描述

方式5： a t t r s 和 attrs和 attrs和listeners

a t t r s ：包含了父作用域中没有被 p r o p 接收的所有属性（不包含 c l a s s 和 s t y l e 属性）。这是其在使用是上的限制。在子组件中要通过这个去接收的条件。如果还要往下进行传递，需要 v − b i n d 来进行向下传递。自能是子类获取父类，同时只有定义出可以修改数据，中间传递组件无法修改值本身 ( 可以通过下面的 attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。这是其在使用是上的限制。在子组件中要通过这个去接收的条件。如果还要往下进行传递，需要v-bind来进行向下传递。自能是子类获取父类，同时只有定义出可以修改数据，中间传递组件无法修改值本身(可以通过下面的 attrs：包含了父作用域中没有被prop接收的所有属性（不包含class和style属性）。这是其在使用是上的限制。在子组件中要通过这个去接收的条件。如果还要往下进行传递，需要v−bind来进行向下传递。自能是子类获取父类，同时只有定义出可以修改数据，中间传递组件无法修改值本身(可以通过下面的listeners去源头进行修改)。

5.1 代码展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>
      <button @click="change1">修改后代组件的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld ref="helloWorld" :age="this.age" :person="this.person" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },

  components: {
    HelloWorld
  },
  methods: {
    change1() {
      this.age = 19;
      this.person.name = "李四";
    }
  }
}
</script>



<template>
  <div>
    <!-- 这是子组件 -->
    <div>子组件中的基本数据类型age的值是:{{this.$attrs.age}}</div>
    <div>子组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div>
    <div>
      <button @click="change2">修改后代组件的值</button>
    </div>
    ----------------------------------------------------------------------------------------------------
    <Hello1 ref ="hello1" v-bind="this.$attrs"/>
  </div>
</template>

<script>
import Hello1 from '@/components/Hello1.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "这是子组件的数据"
    }
  },
  components: {
    Hello1
  },
  methods: {
    change2() {
      this.$attrs.age = 19;
    }
  }
}
</script>




<template>
  <!-- 这是孙组件 -->
<div >
  <div>孙组件中的基本数据类型age的值是:{{this.$attrs.age}}</div>
  <div>孙组件中引用数据类型person的值是:{{this.$attrs.person.name}} --- {{this.$attrs.person.address}}</div>
</div>
</template>

<script>

export default {
  name: 'Hello1',
  data() {
    return {
      count : "孙组件数据"
    }
  },
  methods: {
   
  },
}
</script>
<style>

</style>
5.2 过程分解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.3 $listeners的使用

l i s t n t e r s : 包含所有父组件中的 v − o n 事件监听器 ( 不包含 . n a t i v e 修饰器的 ) 。其作用与 listnters:包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的)。其作用与 listnters:包含所有父组件中的v−on事件监听器(不包含.native修饰器的)。其作用与emit的功能相似。但是其可以不限制与父子组件之间来使用。
注意与.native进行区分，native是用于将原生事件绑定到特定组件中使用的

5.3.1代码展示
<template>
  <div>
    <!-- 这是父组件 -->
    <div>父组件中的基本数据类型age的值是:{{this.age}}</div>
    <div>父组件中引用数据类型person的值是:{{this.person.name}} --- {{this.person.address}}</div>
    <div>
      <button @click="change1">修改后代组件的值</button>
    </div>
    
    <div>
      <Hello2 @click.native="handleTest3" />
    </div>
    ----------------------------------------------------------------------------------------------------
    <HelloWorld ref="helloWorld" :age="this.age" :person="this.person" v-on="{handleTest1, handleTest2}" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import Hello2 from '@/components/Hello2.vue'
export default {
  name: 'Home',
  data(){
    return {
      age : 18,
      person: {
        name: "张三",
        address: "aaa"
      },
      fatherInfo: ""
    };
  },

  components: {
    HelloWorld,
    Hello2
  },
  methods: {
    handleTest1(info) {
     console.log("有参数的传递处理{}", info);
    },
    handleTest2() {
      console.log("无参数的参数处理");
    },
    handleTest3() {


**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

![](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？

![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)
2401_84619287
关注
  • 20
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值