Vue2 组件和组件间的通信

最新推荐文章于 2025-03-25 10:10:57 发布

CodeCxil

最新推荐文章于 2025-03-25 10:10:57 发布

阅读量250

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_41098074/article/details/128064617

版权

前端专栏收录该内容

30 篇文章

订阅专栏

一、组件

组件的使用流程

①创建组件在components文件夹下建议使用驼峰式命名

②组件的导入：通过import 组件名 from ’组件路径‘

③组件的注册：通过components 属性注册

④使用组件

<template>
  <div id="app">
    <Pannel></Pannel>
  </div>
</template>
import Pannel from './components/Pannel';
export default {
  components: {
    //注册组件
    //'标签名': '组件名',
    Pannel: Pannel,
  },
};

组件的好处？

各自独立，便于复用，可以重复使用。

1.2 组件概念

组件是可以复用的Vue实例，封装标签，样式，和 JS代码

组件化封装的思想，把页面上的可重复的部分，封装为组件，从而方便项目的开发和维护

一个页面，可以拆分成一个一个组件，一个组件就是一个整体，每个组件都可以有自己独立的结构样式和行为

1.3基本使用

那一部分标签复用就用那一部分

组件内 template 只能有一个根标签

组件内data必须是一个函数，独立作用域

注册组件的两种方式？

全局注册 main.js

import 组件对象 from 'vue文件路径'
Vue.component('组件名'，组件对象)

局部注册

import 组件对象 from 'vue文件路径';
export default {
  components: {
    PannelL: Pannel,
  },
};

1.4 vue 组件scoped的作用

解决多个组件样式名相同，冲突问题

给style 加上scoped属性，就会在组件的标签上加上一个随机生data-v生成的属性

而且是必须当前组件的元素才会有这个自定义属性，才会被这个样式作用到

二、Vue 组件通信

2.1 组件通信父向子

在子组件中创建 props 来接收数据

通过案例来了解

子组件

<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

父组件

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折" ></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

小结：什么时候要父传子技术

从一个vue组件里的值，传给另外一个vue组件的时候

父传子口诀？

子组件内，props定义变量属性接收，并在子组件中使用。

父组件内使用子组件的变量属性方式给props 变量传值

2.2 组件通信父向子配合循环

把数据循环分别传入组件内显示？

方法父组件 -》子组件循环使用-》传值

<template>
  <div>
    <MyProduct v-for="obj in list" :key="obj.id"
    :title="obj.proname"
    :price="obj.proprice"
    :intro="obj.info"
    ></MyProduct>
  </div>
</template>

<script>
// 目标: 循环使用组件-分别传入数据
// 1. 创建组件
// 2. 引入组件
import MyProduct from './components/MyProduct'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  // 3. 注册组件
  components: {
    // MyProduct: MyProduct
    MyProduct
  }
};
</script>

<style>
</style>

重点：key 属性绑定id 组件属性加冒号，因为传的是变量

循环使用组件注意事项，每次循环，变量和组件都是独立的。

1.3组件通信单项数据流

1.子组件修改，不通知父级，会造成数据不一致性，

2.VUE规定proprs 里面的变量，是只读的

原则：

1.父组件的数据发生了变化，子组件会自动跟着变。

2.子组件不能直接修改父组件传递过来的props 因为只读。

为何不建议，子组件修改父组件的值？

父子数据不一致，而且子组件是依赖父传入的值。

什么是单项数据流？

从父到子组件的数据流向是单向数据流

props里面定义的变量能修改？

不能，props的本事是只读的。

1.4 组件通信 - 子向父

子组件触发父自定义事件方法！来实现修改。

语法：

父：@自定义事件名=“类似method函数（可以自定义名）”

子：this.$emit(“自定义事件名”，传值) 执行父methodds里面函数的代码

//父组件
<template>
  <div>
    <MyProduct @subprice="subprice"></MyProduct>
  </div>
  <!-- @自定义事件名="父组件 methods 里函数名" -->
</template>
export default {
  methods: {
    subprice('参数'){
      // 逻辑代码
    }
  }
};

子组件

<button @click="subFn">宝刀-砍1元</button>
export default {
  methods: {
    subFn() {
      //this.$emit('自定义事件名', 值);
      this.$emit('subprice', '值'); // 子向父
    },
  },
};

什么时候用子传父？

当子想要更改父里面的数据的时候。

1.5 跨组件通信

EventBus 函数