父子组件传值方法

父子组件传值方法vue组件间传值方法:ref、子传父、父传子、VueX、bus。

大家好,又见面了,我是你们的朋友全栈君。

一. ref传值

        1. 子组件(<Invitation>)定义一个变量visible
        2 . 父组件使用ref接收

 <Invitation ref="dialog" />

        3. 父组件可修改值(visible是子组件的一个变量)

this.$refs.dialog.visible=true;

二. 父传子

        1. 父组件使用v-bind绑定一个变量variable(v-bind:变量名=”值”)

<Invitation v-bind:visible="dialogVisible" @getData="getdata" />

        2. 子组件用props接收(与created同级)

props: ["visible"]

三. 子传父

        1. 子组件使用this.$emit绑定一个事件和值

this.$emit("getData", this.data1);

        2. 父组件使用@子组件绑定事件=新方法名

<Invitation v-bind:visible="dialogVisible" @getData="getdata" />

        3. 父组件定义新方法名接收值

getdata(val) {
    console.log(val);
},

四. VueX传值

        1. 建立或者使用已有的store文件夹下面的index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        userid:'',      // 最后获取的变量名
        usertype:'',
    },
    getters: {          // 一般不用
        getinfo(state){
            return state.userid;
        }
    },
    mutations: {        // getUserid就是值来源处定义的方法,id是随便定义的一个变量去接收对应的值
        getUserid(state,id){
            state.userid = id;
        },
    },
    actions: {
    },
    modules: {
    }
})

         2. main.js里面引入store文件夹

// 默认已经引入
import store from './store'
new Vue({
    store,
}).$mount('#app')

         3. 设置变量的值

this.$store.commit("getUserid", this.userid);  
// getUserid表示方法名,在第一步调用;
// this.userid表示需要传递的值

         4. 调用已经设置的值

<script>
    import { mapState } from "vuex";
    export default {
        computed: {
            ...mapState(["userid"]),    // userid是store/index.js的state里面定义的变量名
        },
        created() {
            console.log(111, this.userid);
        },
    };
</script>

五. bus事件总线传值(多用于兄弟组件传值)

        1. main.js中创建一个事件总线

// 建立中转站
let bus = new Vue();
Vue.prototype.bus = bus;

         2. 使用emit绑定一个方法和值

this.bus.$emit("getData", this.data1);

        3. 获取值

this.bus.$on("getData",function(val){
    console.log(val);
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145622.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android悬浮窗的实现

    Android悬浮窗的实现*本篇文章已授权微信公众号guolin_blog(郭霖)独家发布现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以及探索一下实现悬浮窗时的易错点。

  • 一定要看

    一定要看前言(一定要看)首先说一下啊,本人是个菜鸟,但自认是一个懂的上进的菜鸟,现在对游戏开发或多或少懂了一丁点吧。现在把我的资料全部上传,也许大家会觉得,资料有的网上都有吧,也许觉得资料没什么用吧,这个确实。但一个资料只要有一点点对你有用我就满意了,就够了。为了方便大家下载,小文件我都是打包了,没有任何的密码之类的。学习的资料不管是好的还是不好的我都上传了,这些是我从0开始学的东

  • 为何选择iText?java PDF开源库选择与iText发展历史

    为何选择iText?java PDF开源库选择与iText发展历史&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;转眼间,我写iText7系列已经有一年多了,还记得最开始的时候是因为兴趣才翻译iText,不过随着慢慢翻译文章才发现iText的强大之处,最近也是调研了整个javaPDF开源库的生态圈,我给大家详细讲一下javaPDF开源库的选择还有我选择iText的理由。1.源起PDF1.1PDF定义&amp;nbsp;&amp;nbsp;&amp;nbsp;

  • Microsoft Enterprise Library 6.0 下载

    Microsoft Enterprise Library 6.0 下载一不留神entLib也发布了6.0版本程序及源代码的下载:http://www.microsoft.com/en-us/download/details.aspx?id=38789附:MSDN的参考资料:http://msdn.microsoft.com/en-us/library/dn169621.aspx转载于:https://www.cnbl…

    2022年10月20日
  • git第一次拉取远程代码_第一次从gitlab拉项目到本地

    git第一次拉取远程代码_第一次从gitlab拉项目到本地命令1、查看远程所有分支gitbranch-r#查看远程所有分支PSC:\Users\Lenovo\Desktop\tt\dc-biztable>gitbranch-rorigin/Developorigin/masterorigin/dev2、拉取远程分支到本地gitfetchorigin远程分支名:本地分支名这个远程分支名和本地分支名可以不一样,不过一般都会取一样的名字这样不容易混淆#拉取远程Develop分支到本地Develop

    2022年10月25日
  • 神经网络学习(十三)卷积神经网络的MATLAB实现

    神经网络学习(十三)卷积神经网络的MATLAB实现系列博客是博主学习神经网络中相关的笔记和一些个人理解,仅为作者记录笔记之用,不免有很多细节不对之处。卷积神经网络回顾上一节,我们简单探讨了卷积神经网络的反向传播算法,本节我们着手实现了一个简单的卷积神经网,在此之前先以最基本的批量随机梯度下降法+L2正则化对对卷积神经网络的反向传播算法做一个很简单回顾。需要确定参数有:小批量数据的大小mmmCNN模型的层数LLL和所有隐…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号