Vue中组件的五种传值方式

最新推荐文章于 2024-03-06 13:51:03 发布
最新推荐文章于 2024-03-06 13:51:03 发布
阅读量5.9k 收藏 17
点赞数 7
分类专栏： 笔记 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xdlhw1997/article/details/121062178
版权

(一)父组件给子组件传值(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):

点击按钮之后效果如上图 

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

 

                                                         本人微信 

xdlhw1997
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件间的传值-小案例
07-06
写了几个小demo，简单描述了vue中父组件传值子组件、子组件传值父组件、父组件调用子组件的方法或变量。
vue实现组件之间传值功能示例
10-18
主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
Vue3兄弟组件传值（同级别组件传值Vue3）
最新发布
weixin_65793170的博客
03-06 1793
上面使用Vue 3 自身的AP实现了兄弟组件传值，这里我们可以使用 Vue3 的setup语法糖结合第三方库mitt来实现。mitt是一个小巧且快速的TypeScript实现的EventEmitter 3封装库，专门用于Vue 3应用中的组件通信。在Vue 2.x中，通常使用EventBus进行组件间的通信，但在Vue 3.x中，推荐使用mitt作为替代方案。
vue中组件的3种使用方式详解
12-01
前言 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。 在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue更强，不过在发展速度上看来，vue确实很快。 在模块化的前端时代，万物皆组件，vue学习组件是必不可少的。 可是在大多数人熟悉了纯html、jq之后，在初次接触vue的组件时候，却是满脸蒙蔽。 今天咱们以最简单的方式，带vue小白童鞋们，步入组件的世界~ 咱们今天讲三种组件使用方式 基本组件 全局组件 构造组件 1.
vue3父子组件传值.doc
02-05
vue3父子组件传值
VUE兄弟组件传值操作实例分析
10-16
主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
VUE 兄弟组件传值
Jana Jing的分享
02-24 6561
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8291
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
vue兄弟组件传值的五种方法
zhuhaiuser的博客
12-05 4154
Vuex 是Vue的官方状态管理库，它可以将组件的共享状态抽离出来，以一个全局单例模式管理。通过 Vuex，兄弟组件可以直接共享状态，实现数据的传递。方法一:使用父组件作为中介在这种方法中，兄弟组件通过共同的父组件来传值。父组件作为中介，负责接收一个组件的数据，并将其传递给另一个组件。$refs是Vue中一个特殊的属性，可以用来访问组件实例或元素兄弟组件通过$refs来获取其他组件的实例，并直接访问其数据。2兄弟组件分别通过$emit 方法触发自定义事件，并通过$on 方法。方法三:使用事件总线。
Vue中兄弟组件间传值
zoukunyang的博客
08-23 2133
Vue中父组件向子组件传递参数时，可以通过prop；子组件向父组件传递参数时，通过$emit来传递。那么父组件下有多个子组件时怎么实现子组件间的数据传递呢？可以创建一个Vue实例作为第三方媒介实现数据的传递。下面是具体的步骤。
Vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）
weixin_65793170的博客
01-02 4006
简介:兄弟组件，就是同级别的组件⭐
vue 中几种传值方法(3种)
12-13
前言 vue项目中，组件跟组件之间数据的传递是很普遍的行为，在这里总结几种常见的vue组件跟组件之间传值方式，其中，主要有父子组件，非父子组件传值。 父组件向子组件传值 方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。具体可参考官方文档。 父组件传递参数代码如下： [removed] import CenterTemplate from '../../c
vue中兄弟组件之间传值
Liux- 的博客
03-05 3344
Vue中组件传值，兄弟组件之间传值
vue 兄弟传值
CMDN123456的博客
04-13 437
vue 兄弟传值
vue中兄弟组件之间的联动，兄弟组件之间的传值
热门推荐
zyz00000000的博客
12-05 2万+
兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作 方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B 第一步：子组件A传值给父组件 通过$emit将e.target.innerText传递给父组件 <template> <div class="initail"> <ul> &l...
Vue 组件之间传值
忧郁的蛋的专栏
02-18 1万+
使用 props 和 $emit 可以实现父子组件之间的传值，使用 provide 和 inject 可以实现祖先组件向后代组件的传值，使用 Vuex 和 EventBus 可以实现任意组件之间的传值。假设我们有一个父组件和一个子组件，子组件需要接收父组件的一些属性和事件监听器，同时还需要把这些属性和事件传递给子组件的某个子元素。5、使用全局事件总线：可以使用 Vue 的事件机制，通过在 Vue 实例上使用 $on 来监听事件，然后在其他组件中使用 $emit 触发相应的事件来传递数据。
vue兄弟组件传值的3种方法
mrsun_web
08-30 2万+
1，bus总线传值 2，常规子1传父->父传子2 3，vuex 这里详细说明bus总线传值的总路线及方法：本例为基本用法，如果不理解的可以看下面的详细使用方法： //bus.js import Vue from 'vue'; export default new Vue; //使用 兄弟A 传值 import bus from '路径' bus.$emit('自定义事件名称',输出数据) //使用 兄弟B 接值 import bus from '路径' bus.on('自定义事件名',(r
vue 兄弟之间传值
weixin_46166771的博客
03-28 807
vue 兄弟之间传值
详细解释vue中组件间相互传值的示例代码
05-16
在 Vue 中，组件间的数据传递可以通过 props、事件等方式进行。 下面是一个简单的示例代码： ```html <template> <div> <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component!' } }, methods: { handleChildEvent(message) { console.log(message) } } } </script> ``` 在上面的代码中，`ParentComponent` 组件通过 `message` 属性向 `ChildComponent` 组件传递了一个字符串。同时，`ParentComponent` 通过 `@child-event` 事件监听 `ChildComponent` 发出的事件，并在 `handleChildEvent` 方法中处理事件。 下面是 `ChildComponent` 组件的代码： ```html <template> <div> <p>{{ message }}</p> <button @click="sendMessage">Send Message</button> </div> </template> <script> export default { name: 'ChildComponent', props: { message: String }, methods: { sendMessage() { this.$emit('child-event', 'Hello from child component!') } } } </script> ``` 在上面的代码中，`ChildComponent` 组件接收 `message` 属性，并且通过 `$emit` 方法发出了 `child-event` 事件，并向父组件传递了一个字符串。 这样，父组件和子组件之间就可以进行数据传递和事件通信了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值