vue的组件传值

最新推荐文章于 2024-04-20 08:17:28 发布

Lumbago～

最新推荐文章于 2024-04-20 08:17:28 发布

阅读量193

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_55690702/article/details/116033670

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.父子传参

**
父子组件传参

2.子组件

在父组件的子组件标签上绑定一个事件，所需要的调用的方法，然后在子组件中通过$emit(‘事件名’,参数)来触发父组件中的方法，是以参数的形式传递的。

3.vuex

vuex我理解的话就是比父子组件传参好用而且好理解，他就是将组件中需要存储的值用this.$store.commit(‘方法名’,数据);给传到vuex中然后用mutations调用这个方法来放在state定义的数据中，然后在其他所有组件内都可以使用这个数据啦。

在组件的方法中使用传到vuex中

  this.$store.commit("logintrue", this.trueFalse);

在vuex store的index.js中调用mutation中

  logintrue(state, objs) {
            console.log(objs.trueFalse);
        },

4.eventBus（兄弟组件传参）

EventBus Vue中的事件总线

//首先在main.js种挂载全局EventBus

Vuex.prototype.$EventBus = new Vue()

//然后在A组件的方法中用
	Msg(){
         this.$EventBus.$emit('Msg',"这是组件A发送的消息！")
     	}

//然后在B组件的mounted
  mounted(){
            this.$EventBus.$on('sendMsg',(msg)=>{
                console.log(msg);//这是组件A传递过来的消息！
            })
        },

5.本地存储

localstorage
sessionstorage
cookies
简单拿localstorage举个例子吧，就是用window.localstorage.setItem(‘名’,参数’’)先把数据存放到里面,然后在其他组件中用window.localstorage.getItem(‘名’,参数’’)；来获取就ok了。

6.全局变量

全局变量的话是在main.js中设置在Vue的原形中定义的变量，在所有的组件中都可以使用全局变量Vuex.prototype.名=值;在组件中直接使用名字即可（我一般名字前会加个 $跟$ router和$store等一致）

7.promise


function doubleUp(value) {
    return value * 2;
}
function increment(value) {
    return value + 1;
}
function output(value) {
    console.log(value);// => (1 + 1) * 2
}
 
var promise = Promise.resolve(1);
promise
    .then(increment)
    .then(doubleUp)
    .then(output)
    .catch(function(error){
        // promise chain中出现异常的时候会被调用
        console.error(error);

Promise.resolve(1); 传递 1 给 increment 函数

函数 increment 对接收的参数进行 +1 操作并返回（通过return）

这时参数变为2，并再次传给 doubleUp 函数

最后在函数 output 中打印结果

8.this.$refs

“父组件调用子组件中的方法”，并传值；

父组件：


<!--父组件中定义的简单的触发事件-->
<body>
<el-form-item>
     <el-button @click="testThisRefs">测试$refs</el-button>
</el-form-item>
</body>
 
<script>
<!--引入子组件定义 ref="refsChildData"-->
<main-menu ref="refsChildData"></main-menu>
 
 
<!--触发的方法事件-->
methods(){
   testThisRefs(){
       let data = this.formData.projectItem; 
       //refsChildData在子组件中事先定义好了，testRefsChildData是子组件中的方法
       //data是要传递的参数
       this.$refs.refsChildData.testRefsChildData(data);
   }
}</script>

子组件：

methods(){
   testRefsChildData(data){
       console.log("---------父组件调用的子组件中的方法：",data)
   }

}
父组件中点击按钮触发子组件的 testRefsChildData（）方法

9. $p a r e n t /$ children