VUE 组件间的通信

VUE 组件间的通信

父传子

使用

父组件用在使用子组件时绑定值进行传递，子组件用props接收

//父组件
<template>
  <div>
  <child :childData = 'msg'/>
  </div>
</template>
<script>
export default {
    components: {
      child
    },
    data() {
        return {
msg:'父组件传递的值'
        };
    },
    props:{
      
    }
}

 </script>

//子组件
<template>
  <div>
    <h2>{{childData}}</h2>
  </div>
</template>
<script>
export default {
    props:['childData']
}
 </script>

步骤

1. 在子组件中声明props接收父组件挂载的属性
2. 在子组件的template中使用
3. 在父组件中绑定自定义属性

子传父

使用

//子组件
<template>
<div class="">
  <input type="" @input="handleInput" />
</div>
</template>

<script>
export default {
  methods: {
    handleInput(e) {
      this.$emit("inputValue", e.target.value);
    },
  },
};
</script>

<template>
  <div>
  <child @handleInput='input'/>
  </div>
</template>
<script>
export default {
    components: {
      child
    },
    data() {
        return {
			msg:''
        };
    },
    methods:{
      input(newVal){
        this.msg = newVal
			}
    }
}

 </script>

步骤

1. 在父组件 绑定自定义事件
2. 在子组件 触发原生事件 通过this.$emit传递给父组件

兄弟组件之间

发送消息的一端用**$on**

接收消息的一端用**$emit**

注意，一定要用同一个实例！！！！

其他

provide 和indect

provide //父组件

indect //子组件使用

provide来提供变量，然后在子组件中通过inject来注入变量，无论是哪一层父组件

//父组件
export default{
  provide(){
    return{
      msg:'我是父组件的消息'
    }
  }
}

export default{
  inject:['msg'],
  methods(){
    msgAdd(){
     let newmsg = this.msg+'我在子组件里了'
      console.log(newmsg)
    }
  }
}

$parent

this.$parent.[属性]

直接取到父组件