Vue组件间通信的方式

最常见的props传值

父组件在调用子组件的时候将值一并写入，子组件在父组件中通过props接收值。

• 父组件传值：

<template>
  <div>
    父组件
    <Child :msg="msg"></Child>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  data(){
    return{
      msg:'你好，我是你爸爸！'
    }
  },
  components:{
    Child
  }
}
</script>
<style lang="less" scoped>

</style>

• 子组件接收

<template>
  <div>
    子组件
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default {
  // props:['msg'],
  // props:{
  //   msg:String
  // },
  props:{
    msg:{type:String,required:true,default:'hello'}
  },
  data(){
    return{}
  }
}
</script>
<style lang="less" scoped>
div{
  background: #bfa;
}
</style>

vue自定义事件，利用\(on监听，\)emit触发，这个方式可以实现子组件向父组件传值

• 父组件监听

<template>
  <div>
    父组件
    <Child ref='child'></Child>
    <p>{{msg}}</p>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  data(){
    return{
      msg:'你好，我是小明！'
    }
  },
  components:{
    Child
  },
  methods:{
    changeMsg(newMsg){
      this.msg=newMsg
    }
  },
  mounted(){
    this.$refs.child.$on('changeMsg',this.changeMsg)
  }
}
</script>
<style lang="less" scoped>

</style>

• 子组件触发

<template>
  <div>
    子组件
    <input type="text" v-model="newmsg" @keydown.enter="setMsg">
  </div>
</template>
<script>
export default {
  data(){
    return{
      newmsg:''
    }
  },
  methods:{
    setMsg(){
      this.$emit('changeMsg',this.newmsg)
    }
  }
}
</script>
<style lang="less" scoped>
div{
  background: #bfa;
}
</style>

在输入框中输入内容，并回车

发布和订阅PubSub,这种方式需要引入下载PubSub，可以实现任意组件之间的传值

• 父组件订阅（相当于监听数据的改变）

<template>
  <div>
    父组件
    <Child ref='child'></Child>
    <p>{{msg1}}</p>
  </div>
</template>
<script>
import Child from './components/Child.vue'
import PubSub from 'pubsub-js'
export default {
  data(){
    return{
      msg1:'你好，我是小明！'
    }
  },
  components:{
    Child
  },
  methods:{
    changeMsg(newMsg){
      this.msg1=newMsg
    }
  },
  mounted(){
    PubSub.subscribe('changeMsg',(msg,newValue)=>{
      this.changeMsg(newValue)
    })
  }
}
</script>
<style lang="less" scoped>

</style>

• 子组件发布消息，改变数据

<template>
  <div>
    子组件
    <input type="text" v-model="msg" @keydown.enter="setMsg">
  </div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
  data(){
    return{
      msg:''
    }
  },
  methods:{
    setMsg(){
      PubSub.publish('changeMsg',this.msg)
    }
  }
}
</script>
<style lang="less" scoped>
div{
  background: #bfa;
}
</style>

slot 一般用于占位，这里先记录一些简单插槽的使用，官方文档上还有一些复杂的内容，后续再进行增加

• 父元素

<template>
  <div>
    父组件
    <Child >
      <p slot="childComponent">{{ msg }}</p>
    </Child>
  </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  data() {
    return {
      msg: "你好，我是小明！",
    };
  },
  components: {
    Child,
  },
};
</script>
<style lang="less" scoped>
</style>

• 子元素

<template>
 <div>
    子组件
   <slot name="childComponent"></slot>
 </div>
</template>
<script>
export default {
  data(){
    return{
    }
  }
}
</script>
<style lang="less" scoped>
div{
  background: #bfa;
}
</style>