Vue中组件的通信

目录

父组件==>子组件

子组件==>父组件

子组件==>子组件

任意组件间的通信

全局事件总线

---

父组件==>子组件

父组件给子组件传递数据data、方法method等：可以用props传递。

<MyList :todos="todos" :delItem="delItem" />

export default {
  name: "App",
  components: { MyHeader, MyList, MyFooter },
  data() {
    return {
      todos:JSON.parse(localStorage.getItem("todos")) || []
    };
  },
  methods: {
    // 删除任务项
    delItem(id) {
      this.todos = this.todos.filter((todo) => {
        return todo.id !== id;
      });
    },

<script>
    import MyItem from "./MyItem.vue"

    export default {
        name: "MyList",
        components:{MyItem},
        // 子组件中用props接收后,就可以用了.
        props:['todos','delItem']
    };
</script>

子组件==>父组件

在父组件中定义一个方法，然后父组件要先使用props给子组件传递这个方法，然后子组件接收后，调用这个方法给父组件传递数据。

<MyHeader :addItem="addItem"></MyHeader>

export default {
  name: "App",
  components: { MyHeader, MyList, MyFooter },

  methods: {
    // 子组件调用addItem方法后，父组件中的这个方法也会执行，同时接收到子组件发来的todoObj数据。
    addItem(todoObj) {
      // console.log("App组件中",this)
      // console.log("数据:",todoObj);
      this.todos.unshift(todoObj);
    },
}

export default {
        name: "MyHeader",

        // 接收来自App组件的方法
        props:['addItem'],
        methods:{
            add(e){
                if(!e.target.value) return alert("不能输入空任务")
                // 这里的this代表Header组件,Header组件接收来自App组件的addItem方法,
                // 这边通过this.addItem调,因为和App组件中的addItem是同一个方法,所以这边执行了,App组件中的addItem方法也会执行

                // 将数据封装成一个对象
                var todoObj = {id:nanoid(),name:e.target.value,isFinished:false}

                this.addItem(todoObj)

            }
        }
    };
</script>

子组件==>子组件

现在只知道可以通过父组件这个中转站实现。

任意组件间的通信

全局事件总线

上面的$bus就是全局事件总线

mainjs

// 此文件是入口文件

// 引入vue，引入的是精简版的vue,
// 不包含模板解析器,因为经过打包后,.vue都被解析好成.html等浏览器认识的了,不需要完整版中的模板解析器了,所以引入精简版的vue,借用render来渲染
import Vue from 'vue'
// 引入App组件
import App from './App.vue'

// 关闭Vue生产提示
Vue.config.productionTip = false

// 定义一个组件，现在只是一个VueComponent()构造函数，当使用这个组件<Demo/>时，Vue会帮我们实例化一个组件实例对象new Demo()
var Demo = Vue.extend({})
// 我们可以手动自己new一个组件实例对象vc
var vc = new Demo()

// 给Vue原型对象身上加一个属性x=vc
// Vue.prototype.x = vc

// 创建Vue实例
var vm = new Vue({
  render: h => h(App),
  beforeCreate(){
    // 定义全局事件总线$bus,值为vm实例
    Vue.prototype.$bus = this
  }
}).$mount('#app')// 设置挂载点

以下是两个要通信的组件

// 定义组件
    export default{
        name:"Student",
        data(){
            return{
                stuName:"feifei",
                age:35
            }
        },
        mounted(){
            console.log("Student",this.x)
            // 给x绑定一个自定义事件，回调函数是student组件中的getStu方法
            this.$bus.$on("stu",this.getStu);
        },
        methods:{
            // student组件的回调函数
            getStu(value){
                console.log("student组件收到数据了：",value)
            }
        },
        beforeDestroy(){
            // 当组件销毁时，把$bus身上的自定义事件解绑，因为$bus是一直存在的，不解绑不大好
            this.$bus.$off("stu") 
        }
    }

// 定义组件
    export default{
        name:"School",
        data(){
            return{
                schoolName:"PTU",
                address:"学园中街1133号"
            }
        },
        mounted(){
            console.log("School",this.$bus)
        },
        methods:{
            sendData(){
                // 触发x身上的stu事件
                this.$bus.$emit('stu', "来自school组件的数据");
            }
        }
    }

消息订阅与发布

原生的js实现不了，需要导入第三方库。

npm i pubsub-js