vue的组件、组件通信

摸鱼emoji
55 阅读2分钟

什么是组件

  • 定义：可以理解为一段具有完整功能的代码（html，css，js）

如何注册组件

  1. 第一步：创建组件(.vue文件)
  2. 第二步：引入组件
  3. 第三步：注册组件
  4. 第四步：使用组件

单文件组件和全局组件

  • 单文件组件
    • 在APP文件的script标签内引用，在components模块内注册后可以在当前文件使用
    • components: {组件名: 引入的组件是什么}
  • 全局组件
    • 在main.js中引入组件，将这个组件挂载在createApp(App)上，就可以在全局使用
    • myApp.component('组件名', '引入的组件是什么')

组件通信

父传子

  • 定义：父组件在使用子组件的时候通过自定义属性向子组件传参，子组件通过props接收
  • props可以是个数组，也可以是个对象
    • 数组：数组中需要书写字符串, 字符串就是父组件给子组件绑定的属性名,写完之后, 我们就可以在 组件使用了
    • 对象：书写一个对象, 对象的属性名就是我们 父组件给子组件绑定的属性名，对应的属性值是一个对象, 对象内部可以添加一些 配置

注意：子组件可以使用父组件传来的数据，但是不能修改；因为: vue 中的数据遵循的是 单向数据流, 也就是说, 数据能够从父组件流传到子组件, 但是子组件的数据不能流传到父组件, 同时也不能修改。

子传父

  • 定义：子组件在某一个时机向父组件发送通知，触发一个事件，在父组件使用子组件时，给子组件绑定一个自定义事件，当子组件触发事件通知父组件时，执行这个自定义事件会触发一个函数，这个函数的参数就是子组件传递的数据。
  • 子组件向父组件发通知：this.$emit("自定义事件", 传递的数据);

祖孙级通信

  • 定义：在祖先级组件中使用provide将数据暴露给所有后代，可以是data中的数据，也可以是methods中的方法，在需要使用的子孙级组件中使用inject接收到祖先暴露的数据即可使用
provide() {
    return {
        msg1: "一个普通的字符串",
        msg2: this.msg2,
        setMsg2: this.setMsg2,
    };
},


inject: ["msg1", "msg2", "setMsg2"],

属性透传

  • 定义：在祖先组件通过父传子方式传递数据时，在子组件中如果需要直接通过props使用，如果不需要，在当前子组件的子组件(孙子级组件的调用)上添加一个v-bind="$attrs",将当前组件接收到的属性和方法传递给孙子组件。
  • 在孙子组件中使用时:传递过去的属性, 名字不变;传递过去的方法, 名字会变成 on + 方法名
    • this.$attrs.属性名
    • this.$attrs.on方法名

兄弟通信

avatar
文章
阅读
粉丝