Vue组件传参的五种方式

vue

方法一 props传参

1. 父组件

<template>
<div class="wrap">
  <div>我是Father组件</div>
  <Son
       str="我是字符串"
       :num=5
       :obj="{cont:'我是一个对象'}"
       :func="()=>{this.hello()}"
       :arr="arr"></Son>
</div>
</template>
<script>
  import Son from './Son'
  export default {
    name: "Father",
    data(){
      return{
        arr:[1,2,3]
      }
    },
    methods:{
      hello(){
        console.log("hello world!")
      }
    },
    components:{  Son  }
  }
</script>

2. 子组件

<template>
<div>我是Son组件</div>
</template>
<script>
  export default {
    name: "Son",
    props:{//props列表
      arr:Array,//定义参数类型
      num:Number,
      str:String,
      str2:{
        type:String,
        default:"我是默认字符串"//定义参数默认值
      },
      func:{
        type:Function,
        required:false//定义参数是否必须值
      },
      obj:{
        type: Object,
        required:false
      }
    },
    created() {
      console.log(this.str);//我是字符串
      console.log(this.str2);//我是默认字符串
      console.log(this.num);//5
      console.log(this.func);//hello(){console.log("hello world!");}
      console.log(this.arr);//[1,2,3]
      console.log(this.obj);//{cont:'我是一个对象'}
      this.func();//hello world!
    }
  }
</script>

方法二 事件传递

1. 父组件

<template>
<div class="wrap">
  <div>我是Father组件</div>
  <Son @func="speak" ></Son>
</div>
</template>

<script>
  import Son from './Son'
  export default {
    name: "Father",
    methods:{
      speak(msg){
        console.log(msg);//我是子组件发送的消息！
      }
    },
    components:{
      Son
    }
  }
</script>

2. 子组件

<template>
<div>
  <div>我是Son组件</div>
</div>
</template>

<script>
  export default {
    name: "Son",
    mounted() {
      this.$emit('func',"我是子组件发送的消息！");
    }
  }
</script>

方法三 事件监听

1. 父组件

<template>
<div class="wrap">
  <div>我是Father组件</div>
  <Son ref="son"></Son>
</div>
</template>

<script>
  import Son from './Son'
  export default {
    name: "Father",
    mounted(){
      this.$refs['son'].$on('func',(msg)=>{
        console.log(msg);
      })
    },
    components:{
      Son
    }
  }
</script>

2. 子组件

<template>
<div>
  <div>我是Son组件</div>
  <button @click="$emit('func','我是子组件传递的消息1！')">Send1</button>
  <button @click="sendMsg">Send2</button>
</div>
</template>

<script>
  export default {
    name: "Son",
    methods:{
      sendMsg(){
        this.$emit('func','我是子组件传递的消息2！');
      }
    }
  }
</script>

方法四 消息发布与订阅

1. 安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
2. 组件A

<template>
<div class="wrap">
  <div>我是组件A</div>
  <button @click="sendMsg">发送</button>
</div>
</template>

<script>
  import  pubsub from 'pubsub-js'
  export default {
    name: "A",
    methods:{
      sendMsg(){
        pubsub.publishSync("sendMsg","这是A组件发布的消息！");
      }
    }
  }
</script>

2. 组件B

<template>
<div>
  <div>我是组件B</div>
</div>
</template>

<script>
  import pubsub from 'pubsub-js'
  export default {
    name: "B",
    mounted(){
      pubsub.subscribe("sendMsg",(e,msg)=>{
        console.log(e,msg);//sendMsg 这是A组件发布的消息！
      })
    },
  }
</script>

• publishSync : 同步发送消息
• publish: 同步发送消息
• subscribe: 订阅消息
• unsubscribe: 卸载特定订阅
• clearAllSubscriptions: 清除所有订阅

方法五 EventBus传参

1. 在main.js种挂载全局EventBus

Vue.prototype.$EventBus = new Vue()

2. A组件

<template>
<div class="wrap">
  <div>我是组件A</div>
  <button @click="sendMsg">发送</button>
  </div>
</template>

<script>
  export default {
    name: "A",
    methods:{
      sendMsg(){
        this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")
      }
    }
  }
</script>

3. B组件

<template>
<div>
  <div>我是组件B</div>
  </div>
</template>

<script>
  export default {
    name: "B",
    mounted(){
      this.$EventBus.$on('sendMsg',(msg)=>{
        console.log(msg);//这是组件A发送的消息！
      })
    },
  }
</script>

通过挂载全局Vue对象传递参数。

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/30 02:43