Vue组件传值父子组件传值父传子子传父非父子组件之间通信(兄弟组件、隔代关系组件等)

vue组件

基本概念

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

好处：各自独立，便于复用

组件化：封装的思想，把页面上“可复用的部分”封装为"组件”,从而方便项目的开发与维护

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

组件构成

全局组件

 

      main.js

1、创建组件 ----------文件名App.vue

2、引入组件 ----------import 组件对象 from 'vue文件路径'

3、全局注册-----------Vue.component("组件名", 组件对象)

    App.vue

4、在子组件App.vue中把"组件名当标签名使用"-----<组件名></组件名>

局部组件

  Pannel_1.vue

1、创建组件 ----------文件名Pannel_1.vue（文件名App.vue,封装组件Pannel_1.vue（标签、样式、js都放进去）

  App.vue

2、引入组件 ----------import pannel from "./Pannel_1.vue";

3、全局注册-----------components: {pannely: pannel },

4、把"组件名当标签名使用"-----<pannely><pannely

scoped

原理和过程: 会自动给标签添加data-v-hash值属性，所有选择都带属性选择

 操作:            给style添加scoped,只针对当前Vue组件内标签生效

组件通信

父传子

使用场景:从一个Vue组件把值传给另一个Vue组件（父->子）

 父组件自定义属性传值，子组件通过props接收，并使用

子传父

 子组件通过this.$emit（）触发，父组件接收，并处理业务逻辑

步骤：

1：父组件通过绑定自定义事件，绑定事件处理函数

2：子组件通过恰当事件触发父组件的事件处理函数（恰当时机---->自身绑定事件）

3：子组件使用this.$emit("自定义事件"，传递的参数)触发父组件处理函数

4：父组件处理函数被触发，接收数据并处理

   示列：

        需要使用vue_cli脚手架创建项目，在项目中使用示列

   App.vue

<template>
  <div>
    <!-- 每次循环，item变量和当前组件都是独立执行 -->
    <!--  组件对象 当标签使用-->
    <!--  
      v-for="(item, ind) in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.info"
       子传->父--循环传值
       自定义属性 title、price、info,把相应的变量(item.proname、item.proprice、item.info)传递给子组件
      -->
    <myProduct
      v-for="(item, ind) in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.info"
      @subStr="fan"
      :index="ind"
    ></myProduct>
    <!-- @subStr="fan" 给子组件绑定自定义事件  -->
  </div>
</template>

<script>
// 1 目标：局部注册
// 1.0 新建文件 ---myproduct.vue
// 1.2 引入组件
// 1.3 注册组件components{"组件对象"，组件名}}
// 1.4  把把局部注册的"组件对象" 当标签使用

// 2 目标 父向子传值
// 2.1 在父组件自定义属性给子组件传值
// 2.2 子组件通过props接收变量，并使用变量
import myProduct from "./components/study_components/myproduct.vue";
export default {
  components: {
    // myProduct：myProduct 名跟值一样的话可简写成myProduct
    myProduct,
  },
  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: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  methods: {
    fan(index, price) {
      // 逻辑代码
      // console.log(index, price);
      // 取出对应的数据并砍价
      this.list[index].proprice =
        this.list[index].proprice > 2 &&
        (this.list[index].proprice -= price).toFixed(1);
    },
  },
};
</script>

<style>
</style>

 myproduct.vue

<template>
  <div class="my-product">
    <h3>标题:{{ title }}</h3>
    <p>价格:{{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="btnBargain">砍一刀</button>
  </div>
</template>

<script>
// 3 目标 子向父传值
// 3.1： 父组件中给子组件绑定自定义事件，绑定自定义处理函数
// 3.2： 子组件在恰当时机触发事件
// 3.3：  恰当时机是指用户点击砍价按钮时
// 3.4： 使用this.$emit()方法，触发自定义事件
// 3.5 ：传递数据给父组件
// 3.6 ：父组件处理函数触发，接收数据并处理砍价业务

export default {
  // Vue规定props里变量是只读，不可进行赋值
  //子组件通过props接收父组件传递来的自定义属性，并使用渲染到页面
  props: ["index", "title", "price", "info"],
  methods: {
    //   恰当时机，触发父组件绑定的subStr自定义事件
    // this.$emit()参数1:事件名 参数2 ~参数N:传递的参数
    btnBargain() {
      this.$emit("subStr", this.index, 1);
    },
  },
};
</script>

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

 兄弟传值（eventBus)

使用场景：当2个没有引用关系的组件之间要通信

本质：空白Vue对象，只负责$on和$emit

接收方：eventBus.$on("事件名"，函数体)

传递方：eventBus.$emit("事件名"，值)

 

 

 --------------------------------------------------------------未完待续-----------------------------------------------------------------