Vue中组件的五种传值方式

父组件给子组件传值(props)子组件给父组件传值(自定义事件$emit)子组件给父组件传值(事件总线)兄弟组件之间互相传值(利用pusub包传值)组件间互传(利用vuex传值) //个人认为这个传值很six

xdlhw1997

6059人浏览 · 2021-10-31 17:23:28

xdlhw1997 · 2021-10-31 17:23:28 发布

(一)父组件给子组件传值(props)

父组件传值代码:

<template>
     <div id="app">
        <myfooter :list="list"></myfooter><!-- 在父组件中利用:list="list"来传值-->
    </div>
</template>
<script>
import myfooter from "./components/myfooter.vue"
    export default {
        name: 'app',
        data(){
            return {
              list:{id:1,task:"设计产品原型"},
            }
          },
      components: {
        myfooter
      } 
}
</script>

子组件代码:

<template>
     <div id="myfooter">
        <p>{{list.id}}</p>
        <p>{{list.task}}</p>
    </div>
</template>
export default {
  name: 'app',
  props:["list"],//在子组件中利用props:["list"]来接收父组件传过来的值 ;在此必须加引号
  },
 
}
</script>

显示结果(1):

(二)子组件给父组件传值(自定义事件$emit)

子组件代码:

<template>
  <div id="myfooter">
    <button @click="submit">提交</button>
  </div>

</template>

<script>
export default {
  name: 'myfooter',
  data(){
    return {
      title:"我是子组件中的数据"
    }
  },
  methods:{
    submit(){
      this.$emit("submit",this.title)//在子组件中触发事件，格式为：this.$emit("事件名",要传的值)
    }
  }
}
</script>

父组件传值代码:

<template>
     <div id="app">
       <p>{{content}}</p>
        <myfooter @submit="aa"></myfooter> <!--在父组件中接受值，格式为:@事件名 = "函数"  -->
    </div>
</template>
<script>
import myfooter from "./components/myfooter.vue"
    export default {
        name: 'app',
        data(){
            return {
              content:''
            }
          },
        methods:{
          aa(value){
            this.content=value;//在此value就是从子组件传过来的值
          }
        },
        components: {
          myfooter
      } 
}
</script>

显示结果(2):

点击提交后页面的显示

(三)子组件给父组件传值(事件总线)

在main.js配置事件总线代码:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//Vue.prototype.$bus = new Vue();
new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus= this//在main.js中vue实列原型中注册事件总线
  },
}).$mount('#app')

Vue.prototype.$bus = new Vue()和在beforCreate钩子函数中的Vue.prototype.$bus=

this效果相同

父组件传值代码:

<template>
     <div id="app">
        <myfooter></myfooter>
        <myheader></myheader>
    </div>
</template>
<script>
import myfooter from "./components/myfooter.vue"
import myheader from "./components/myheader.vue"
    export default {
        name: 'app',
      components: {
        myfooter,
        myheader
      } 
}
</script>

myfooter子组件代码:

<template>
  <div id="myfooter">
    <button @click="submit">给兄弟myheader组件传值</button>
  </div>

</template>

<script>
export default {
  name: 'myfooter',
  data(){
    return {
     list:{id:1,task:"设计产品原型"},
    }
  },
  methods:{
    submit(){
      this.$bus.$emit("sendata",this.list)//在子组件中触发事件，格式为：this.$bus.$emit("事件名",要传的值)
    }
  }
}
</script>

myheader子组件代码:

<template>
  <div id="myheader">
      <h3>从myfooter组件传来的值</h3>
      <p>{{mylist.id}}</p>
      <p>{{mylist.task}}</p>
  </div>
</template>

<script>
export default {
    name:"myheader",
    data(){
        return {
            mylist:""
        }
    },
    mounted(){
        this.$bus.$on("sendata",this.receivedata)//在子组件钩子函数中接收数据this.$bus.$on("事件名",调用的方法);
        //在created中接受也可，建议在mounted中接受
    },
    methods:{
       receivedata(value){
           this.mylist = value;
       } 
    },
    beforeDestroy(){
        this.$bus.$off("sendata")//记得在数据销毁之前要删除此事件哦
    }
}
</script>
<style scoped>
    #myheader{
        width: 300px;
        background: #eee;
    }
</style>

显示结果(3):

(四)兄弟组件之间互相传值(利用pubsub包(消息订阅)传值)

（1）先下载pubsub-js包，代码如下：

npm i pubsub-js

父组件传值代码:

<template>
     <div id="app">
        <myfooter></myfooter>
        <myheader></myheader>
    </div>
</template>
<script>
import myfooter from "./components/myfooter.vue"
import myheader from "./components/myheader.vue"
    export default {
        name: 'app',
      components: {
        myfooter,
        myheader
      } 
}
</script>

myfooter子组件代码:

<template>
  <div id="myfooter">
    <button @click="submit">给兄弟myheader组件传值</button>
  </div>

</template>

<script>
import pubsub from"pubsub-js"
export default {
  name: 'myfooter',
  data(){
    return {
     list:{id:1,task:"设计产品原型"},
    }
  },
  methods:{
    submit(){
      pubsub.publish("sendata",this.list)//在子组件中触发事件，格式为：pubsub.pulish("事件名",要传的值)
    }
  }
}
</script>

myheader子组件代码:

<template>
  <div id="myheader">
      <h3>从myfooter组件传来的值</h3>
      <p>{{mylist.id}}</p>
      <p>{{mylist.task}}</p>
  </div>
</template>

<script>
import pubsub from"pubsub-js"
export default {
    name:"myheader",
    data(){
        return {
            mylist:""
        }
    },
    mounted(){
        pubsub.subscribe("sendata",this.receivedata)//在子组件钩子函数中接收数据pubsub.subscribe("事件名",调用的方法);
        //在created中接收也可，建议在mounted中也可
    },
    methods:{
        //在vue3.0之前版本,方法中有两个参数,
    //eg:pubsub.subscribe("事件名",(eventName,value) => {console.log(eventName,value)});
    //第一个参数是触发事件的名字，第二个参数是传递的值
       receivedata(eventName,value){
           this.mylist = value;
       } 
    },
    beforeDestroy(){
        pubsub.unsubscribe("sendata")//记得在数据销毁之前要删除此事件哦
    }
}
</script>
<style scoped>
    #myheader{
        width: 300px;
        background: #eee;
    }
</style>

显示结果如显示结果(3)所示

(五)组件间互传(利用vuex传值,基础传值)

（1）先下载vuex包，代码如下：

npm i vuex

（2）在src目录下建立一个store文件夹，并在store下建立一个index.js文件

index.js代码:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const actions = {
    save(context,value){
        context.commit("saveData",value);
    }
}
const mutations = {
    saveData(state,value){
        state.list = value;
    }
}
const state  = {
    list:"",
}
export default new Vuex.Store({
    actions,
    mutations,
    state
})

（3）在main.js中注册store

代码：

import Vue from 'vue'
import App from './App.vue'
import store from "./store/index.js"//如果在store下的文件只有index.js,index.js可不用写,eg:import store from "./store"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

myfooter子组件代码:

<template>
  <div id="myfooter">
    <button @click="submit">给兄弟myheader组件传值</button>
  </div>

</template>

<script>
export default {
  name: 'myfooter',
  data(){
    return {
     list:[
       {id:1,task:"设计产品原型"},
       {id:2,task:"设计产品原型"},
       {id:3,task:"设计产品原型"}
     ],
    }
  },
  methods:{
    submit(){
      this.$store.dispatch("save",this.list)
    }
  }
}
</script>

myheader子组件代码:

<template>
  <div id="myheader">
      <h3>从myfooter组件传来的值</h3>
      <ul>
          <li v-for="item of this.$store.state.list" :key="item.id">
              <p><span>{{item.id}}</span> <span>{{item.task}}</span></p>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    name:"myheader",
}
</script>
<style scoped>
    #myheader{
        width: 300px;
        background: #eee;
    }
</style>

父组件中代码和事件总线中的代码一样

显示结果(4):

点击按钮之后效果如上图

小生第一次写博客,如有问题，请大家指出，接受批评。

本人微信

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^