资讯专栏INFORMATION COLUMN

vue 组件间传值

sourcenode / 2701人阅读

摘要:父组件给子组件传值父组件二哈子组件子组件给父组件父组件子组件点击啦啦啦啦定义状态中引入传值取值地址传值

1、父组件给子组件传值

父组件:


子组件:


2、子组件给父组件

父组件:


子组件:


3、vuex

store.js:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    headImg: JSON.parse(sessionStorage.getItem("headImg")) || ""
  },
  mutations: {
    newImg(state, msg){
      sessionStorage.setItem("headImg", JSON.stringify(msg))
      state.headImg = msg;
    }
  }
})

export default store

main.js中引入vuex

import Vue from "vue";
import Vuex from "vuex";
import store from "./vuex/store";
Vue.use(Vuex);
var v = new Vue({
  el: "#app",
  router,
  store,
  components: {index},
  template: "",
  created: function () {

  }
})

传值:this.$store.commit("newImg", value);
取值:this.$store.state.headImg

github地址:vue传值

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99975.html

相关文章

  • Vue2从0到1(四):Vue组件化及组件传值

    摘要:前面讲了环境的搭建用打包和的使用以及的使用下面讲一下组件化及组件间传值主要包括父子组件间传值,兄弟组件间传值,不相关组件间传值。组件化及组件间传值组件化组件是最强大的功能之一。 前面讲了环境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用 下面讲一下Vue组件化及组件间传值: 主要包括 父子组件间传值,兄弟组件间传值,不相关组件间传值。 10.Vue组件...

    geekzhou 评论0 收藏0
  • Vue 组件传值

    摘要:前言作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种组件间传值的几种方法,跟着小编一起来学习一下吧实现注意学习本文,需要您对有一定的了解。为了便于讲解,以下方法均假设父组件是,子组件是,兄弟组件是。 前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来...

    VishKozus 评论0 收藏0
  • 关于vue组件传值的一些问题

    摘要:一父子组件之间的传值父组件传递给子组件需要在子组件中通过接收值子组件传递给父组件自定义事件,要传输的值子父在子组件中需要通过点击事件传递给父组件值,点击事件触发后,通过自定义事件,要传递的值注意在父组件接收时必须在对应的子组件接收相应 一:父子组件之间的传值** 父组件传递给子组件:需要在子组件中通过props接收值子组件传递给父组件:$emit(自定义事件,要传输的值) 子--->父...

    chnmagnus 评论0 收藏0
  • React Native 传参的五种方式

    摘要:在中由于业务的需要我们往往要在诸多的页面间,组件之间做一些参数的传递与管理在这里我总结了几大经过验证,稳定好用的方式给大家导航传值推荐指数适用范围相邻页面间传值兼容性原理为页面的上挂载了对象可用来做路由跳转,在做页面跳转时可以携带参数回调方 在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的...

    cnTomato 评论0 收藏0
  • 理清楚Vue的结构

    摘要:的使用场景在中通过引入在中,由于配置有处理各种文件的,所以可以用引入指令简单值,数组,对象,数组中对象数组,对象自定义全局指令自定义指令名字指令生效周期配置对象被绑定的那个元素的原生对象一旦绑上马上调用同上元素插入到之后再 1.Vue的使用场景 : * 在html中通过script引入 * 在webpack中,由于配置有处理各种文件的loader,所以可以用import引入 2.Vu...

    terro 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<