vue组件通信 详解

父子通信

father

<template>
  <div>
      <p>home</p>
    <left :users="users"></left>
    <right></right>
    
  </div>
</template>

<script>

import left from "./LeftChild"
import right from "./RightChild"
export default {
    name:"home",
    components:{
        left,right
    },
     data(){
            return{
                msg:'这是条数据',
                users:[1,2,3]
            }
     },
}
</script>

<style>

</style>

child

<template>
    <div>
        <p>LeftChild</p>
        <!-- 必须有key 对象 -->,.	
        <li v-for="(value,key) in users" v-bind:key="key">
            {{value}}  {{key}}
        </li>
    </div>
</template>

<script>
export default {
    name:"LeftChild",
    props:{
        users:{
            require:true,
            type:Array
        }
    }
}
</script>

<style>

</style>

传值数据更新监听

//父容器  按钮改变值
//子容器
 beforeUpdate(){
        console.log('数据更新之前');
    },
    updated(){
        console.log('数据更新完毕');
    },

子像父传递

我只放入了关键代码

//子容器事件
 <el-button type="success" @click="change">btn1</el-button>
  change(){
            console.log("change")
            this.$emit("test","子容器的信息")
        }


// 父容器响应
{{title}}
 <left  v-on:test="update"></left>
  update(e){
            console.log("update")
            this.title = e
 }

事件组件通信

//在src 下面建 event.js 

import Vue from "vue"

const vm = new Vue

export default vm

//都需要导入  import vm from "../event"
//  孩子组件的事件
 change(){
          vm.$emit("data","hello world")
}


// 父组件写在 mounted 里面
 mounted(){
        vm.$on("data",res=>{
            console.log(res)
            this.title = res
        })
    },

ps:

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array 

refs 通信

//获得当前组件 然后调用它的方法
 mounted(){
        const left = this.$refs.left
        console.log(left.title)
        left.test()
    },