vue组件通信

组件之间数据是独立的 可以通过一定步骤实现组件之间的数据传递

1、子传父

1.1第一步：父组件中通过自定义属性传递

<Test name='133' :age='age'></Test>

  data(){
    return {
      age:13
    }
  },

1.2第二步：子组件通过props指定接受

export default {
  props:['name','age']
}

<template>
  <div>
      {{name}}
      {{age}}
  </div>
</template>

1.3总写：以把字符串和变量传给子组件为例

父组件代码

<template>
  <div>
    <MyProduct title="好吃的口水鸡" price='88' intro="跳水价"></MyProduct>
    <MyProduct :title="title" :price='price' :intro="intro"></MyProduct>
  </div>
</template>

<script>
import MyProduct from "@/componets/MyProduct";
export default {
  components: {
    MyProduct,
  },
  data() {
    return {
      title: "好吃的口水鸡",
      price:88,
      intro:'跳水价'
    };
  },
};
</script>

<style>
</style>

子组件代码

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

1.4把数据遍历给子组件

可以在父组件里遍历

<MyProduct v-for="item in list" :key="item.id" :obj='item'></MyProduct>

props: ['obj'],

也可以在子组件里遍历

<MyProduct :obj='item'></MyProduct>

<div class="my-product" v-for="obj in list" :key="obj.id">

2、父传子

2.1第一步：子触发自定义事件

<button @click="fn">click</button>

  methods: {
    fn() {
      this.$emit("on-send", this.fName);
    },
  },

fName: 999,

2.2第二步：父接受子传过来的内容

import Child from "@/componets/Child";

  components: {
    Child,
  },

<Child @on-send='sendFn'></Child>

  methods:{
    sendFn(val){
      console.log('子传父'+val);
    }
  }

2.3单向数据流

2.3.1父组件把数据传递给子，子接收使用

2.3.2父组件修改数据 数据向下流动到子组件 子组件在当前部分实现数据驱动视图

3、兄弟组件之间通信

数据提升：把子组件数据上传到父组件

组件通信：兄弟之间传参 eventBus

bus.$emit('xxx',99)

bus.$on('xxx',(res)=>{

console.log(res)

})

兄弟传参步骤

1、创建One.vue Two.vue引入父组件

App.vue代码

<template>
  <div>
    <One></One>
    <Two></Two>
  </div>
</template>

<script>
import One from "@/components/One";
import Two from "@/components/Two";
export default {
  components: {
    One,
    Two,
  },
};
</script>

<style>
</style>

2、在子组件中添加样式

One.vue

<div class="box">
    One
    <button @click="btnFn">点击发送数据给two</button>
</div>

.box{
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: greenyellow;
}

Two.vue

<div class="box1">two</div>

.box1 {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: green;
}

3、在与main.js同目录下创建eventbus.js

import Vue from 'vue'
let bus =new Vue()
export default bus

4、在组件中导入eventbus.js

import bus from '@/eventbus.js'

5、把One组件中的值传入Two组件中

methods:{
    btnFn(){
        bus.$emit('on-send','我是one的数据')
    }
}

    created(){
        bus.$on('on-send',(res)=>{
            console.log('我在two接收数据：'+res);
        })
    }