vue组件之间的传值

父组件向子组件传递数据

        1:父组件代码

<template>
  <div>
    <-- 与下面的数据进行绑定 -->
    <select-site :deptN="deptN" :deptI="deptI"/>
  </div>
</template>
   
<script>
//引入的外部文件格式
//例如：import 《组件名称》 from '《组件路径》';
import SelectSite from "../../components/doctor/selectSite";

export default {
  components: {
    //这里注册组件
    SelectSite,
  },
  data() {
    //定义要传给子组件中的数据
    return {
      deptN: "上海",
      deptI:  0,
    };
  },
};
</script>

        2:子组件中的代码

        

<template>
  <div>

  </div>
</template>
<script>
export default {
  name: "select-site",
  //props中中的数据需要和父组件中绑定的名称一样
  props: ["deptI", "deptN"],
  data() {
    return {}
  },
  methods: {
    //组件传值
    test() {
       //通过this就可以获取到值
       console.log(this.deptI)
       console.log(this.deptN)
    }
  },
  created() {
     this.test();
  },
}
</script>

子组件向父组件传值

        1:子组件代码

<template>
<div @click="test"></div>
</template>
<script>

export default {
  data() {
    return {
      test: "测试",
    };
  },
  methods: {

    test() {
         this.$emit('test',data);//向父组件提交数据this.$emit('父组件中需要绑定的事件,需要传输`            
                                   的数据);
    },
  },


};
</script>

         1:父组件代码

<template>
  <div>
    <-- 父组件中需要感知子组件的事件 -->
    <select-site @test="test"/>
  </div>
</template>
   
<script>
//引入的外部文件格式
//例如：import 《组件名称》 from '《组件路径》';
import SelectSite from "../../components/doctor/selectSite";

export default {
  components: {
    //这里注册组件
    SelectSite,
  },
  data() {
    //定义要传给子组件中的数据
    return {
    };
  },
  methods: {
    //子组件会把数据传输过来这边需要接收
    test(data) {
      console.log(data)//输出测试
      
    },

  },
};
</script>

 非父子组件传递数据

        使用PubSub

        

//先安装
npm install --save pubsub-js
//在需要的组件里引入
“import PubSub from ‘pubsub-js’”

//PubSub.publish('名称', 传输的数据)
PubSub.publish('name', data)

//接收数据'name'必须和订阅的名字相同
PubSub.subscribe('name', (msg, data) => {
        this.name(data)
})