vue 通过下拉框组件了解Vue中父子组件通讯_vue2父子联动下拉框-程序员宅基地

技术标签: vue动画  vue  父子组件通信  emit  

最近很忙,一直没有时间写文章,接下来的时间,主要通过写一些vue组件的小例子,然后认识到vue中的一些知识,让大家都学会vue框架的使用

了解父子组件的通信,使vue组件化开发的第一步,所以这点很重要,希望这篇文章能后帮助你了解到父子组件中是如何通信的

<!--父组件-->
<template>
<oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
<!--
*父组件向组件传递参数首先要在父组件中绑定特定的参数,如:selectData;他等于数据selectData
*这个数据便是我们要传给子组件的数据
-->
</template>
<script>
import oSelect from "@/components/select.vue";
export default{
    name: 'App',
    data(){
        return {
            selectData: {
                defaultIndex: 0,//默认显示索引值
                selectStatus: false,//下拉框是否出现
                selectOptions: [ //下拉框中的数据
                    {
                        name: 'time',
                        context: '按时间排序'
                    },
                    {
                        name: 'view',
                        context: '按浏览量排序'
                    },
                    {
                        name: 'like',
                        context: '按点赞数排序'
                    },
                    {
                        name: 'reply',
                        context: '按回复数排序'
                    },
                    {
                        name: 'reward',
                        context: '按打赏数排序'
                    }
                ]
            }
        }
    },
    methods:{
        onChangeOption(index){
            /**此处的形参,就是子组件传过来的参数**/
            this.selectData.defaultIndex = index;
            //通过默认索引的改变,来改变选择的数据
        }
    },
    components: {
        oSelect
    }
}
</script>
<!--子组件-->
<template>
<div class="select-box" @click="changeStatus">
    <h3 class="select-title"
        :name="selectData.selectOptions[selectData.defaultIndex].name"
        <!--
            这一步主要是传递选择的值
        -->
        :class="{'select-title-active': selectData.selectStatus}"> 
        &
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_22557797/article/details/78723082

智能推荐

炫酷!200 行 Python 代码实现马赛克拼图!_图片转换马赛克拼图-程序员宅基地

文章浏览阅读715次。在一图胜千言的时代,没有什么比一张图片更有冲击力的了,那如果一千张图片拼接起来是什么效果呢?别问,问就是两字 —— 炫酷!你有没有想过上面的图片是怎么实现的,难道这是用 ps 一张张拼起来的?当然,靠人工把近千张图片按照色域一一排列,应该是不可能的。今天我们就用 Python 做一个马赛克图片生成器~ 只需要 200 行 Python 代码,就可以将任意图片转化为马赛克拼图效果,一劳永逸!拿来记录校园生活、游戏生涯、送女朋友都最合适不过了!ONE项目思路项目大概_图片转换马赛克拼图

改善深层神经网络(5) —— 超参数调试,Batch正则化和程序框架_超参数间存在耦合-程序员宅基地

文章浏览阅读285次。文章目录1. 调试处理2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围1. 调试处理首先,我们先列举部分我们常见的超参数:学习率α动量梯度下降因子βAdam算法的三个超参数β1,β2,εβ_1,β_2,εβ1​,β2​,ε2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围..._超参数间存在耦合

ORB-SLAM3笔记_orb_slam3替换相机模型-程序员宅基地

文章浏览阅读725次,点赞3次,收藏2次。相对orbslam2的改进点有: IMU的官方支持 引入相机通用类,方便替换不同模型的相机。并且官方实现了通用相机模型,就是pinhole-equi或者fisheye模型。 假如地图管理功能,支持多个子地图的存在,以及可能的时候合并子地图 recall更高的回环检测,因为要合并地图。如果recall太低,会照成大量的重复地图。 之前的做法是要求DBOW能够找到连续的3 frame。现在改为只要找到1 frame,然后就做集合一致性检查。 使用通用相机模型带来的改变 因为非小孔_orb_slam3替换相机模型

如何获取每月第一个/最后一个交易日_获取每个月第一个交易日sql语句-程序员宅基地

文章浏览阅读5k次,点赞4次,收藏7次。思路是,获取指数的行情信息,然后利用如下代码进行判断:data['first'] = data['trade_date'].where(data['month'] != data.shift(1)['month'], np.nan)data['last'] = data['trade_date'].where(data['month'] != data.shift(-1)['month'], np.nan)完整代码如下:数据源我用的是wind,大家可以用tushare来替代,获取更简单一些._获取每个月第一个交易日sql语句

iso文件:抱歉,装载文件时出现问题_抱歉,装载文件时出现问题-程序员宅基地

文章浏览阅读2.4w次,点赞3次,收藏7次。问题描述右击 ISO 文件选择“装载”,便会弹出一个消息框报错,这该怎么办呢? 解决方法网上有很多的解决办法,例如:更改驱动器号和路径或者是更改注册表 但是我感觉应该没有那么多问题,继续在网上找解决的方法,终于找到一个简单的方法,具体方法如下: 1.右键点属性 2.详细信息 一般不能装载的都是属性都是RAP,可以装载的是RA 3.选择删除属性和个人信息 4.接下来会生成一个副本_抱歉,装载文件时出现问题

在VMware15中创建虚拟机安装ubuntu系统(超详细教程)_vmware15可以装ubuntu14.04-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏103次。此篇博文分享幼儿园老小(本人)创建虚拟机安装ubuntu系统的详细操作过程,希望对新手有所帮助咯!(大佬请自行略过哈哈)我的下载地址详情如下:下载请戳–>Ubuntu18.04/64位下载地址提取码:fv6h操作详细过程:1、选中下载完成的ubuntu.rar压缩包,右键选择解压,路径自己选择,我这里是直接【解压到ubuntu】,等待解压完成。2、点击解压完的【ubuntu文件..._vmware15可以装ubuntu14.04

随便推点

Tree树状图的动态增删查改(中)新增节点_kd tree 树 动态 增删 增加 删除 节点 调整-程序员宅基地

文章浏览阅读2.9k次。一、 新增节点1、 新增的基本功能样式可以在tree里面的案例找到,我这里用的添加节点是子节点,父节点其实是不用插件里面那个添加的。只要配置合适,给子节点添加子节点,该节点就会自动变成父节点的,前提是取消节点锁定。2、下面三个a标签分别是添加、修改和删除,把id等值写对了就能对树进行编辑操作了。3、 只要上面的HTML样式写对了,点击了a标签它插件就会自己调用下面的add方法,新增节点后..._kd tree 树 动态 增删 增加 删除 节点 调整

你不知道的功力非凡的20个windows XP小秘密_你所不知道的xp-程序员宅基地

文章浏览阅读745次。你不知道的功力非凡的20个windows XP小秘密 1. systeminfo:让XP列出更多有用信息 Windows XP 总是在炫耀它可以给稳定工作多么长的时间!要想详细地了解这一信息,你可以接入 Windows的“开始菜单”,再开启“附件菜单”中的“命令提示符”,然后在其中输入“systeminfo”这个命令。电脑就会给你显示出许多有用信息,其中包括了这个系统的初次安装时间,以及本次持_你所不知道的xp

nginx常用模块功能介绍_htpasswd -cb-程序员宅基地

文章浏览阅读613次。实验环境:centos7.6,2G内存,50G硬盘大小,虚拟机ip:172.16.1.7,172.16.1.8,172.16.1.9nginx模块nginx访问模块:ngx_http_access_module目的:禁止外网访问,允许内网访问,我这里10.0.0.0是外网,172.16.1.0是内网1.举例配置: location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; _htpasswd -cb

图论算法——图的遍历_洛谷 图的深度优先算法-程序员宅基地

文章浏览阅读5.2k次,点赞2次,收藏3次。图的基本应用——图的遍历,从具体的题目着手,学习图的遍历方式及代码形式。_洛谷 图的深度优先算法

mongo基础语句全解析_mongo语句-程序员宅基地

文章浏览阅读977次。MongoDB概念解析 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row documen..._mongo语句

Swift 编程语言入门教程_swift 入门教程 书籍-程序员宅基地

文章浏览阅读522次。原文地址:http://gashero.iteye.com/blog/2075324目录1 简介2 Swift入门3 简单值4 控制流5 函数与闭包6 对象与类7 枚举与结构1 简介今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍《The Swift Programming Language》中摘录和_swift 入门教程 书籍

推荐文章

热门文章

相关标签