父组件传递数据到子组件props

父组件

<template>
<div class="main">
<div class="top">
<span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{item.con}}</span>
</div>
<div class="con">
<router v-bind:message="parentMsg"></router>
</div>
</div>
</template>
<script>
import routerView from './routerView.vue'
export default{
data(){
return{
lanMenu:[
{con:'全部',icon:'all'},
{con:'Android',icon:'android'},
{con:'前端',icon:'web'},
{con:'iOS',icon:'ios'},
{con:'后端',icon:'java'},
{con:'设计',icon:'design'},
{con:'产品',icon:'products'},
{con:'工具资料',icon:'tool'},
{con:'阅读',icon:'read'},
],
ind:0,
parentMsg:'all'
}
},
components:{
"router":routerView
},
methods:{
clickMenu(index,con){
//改变默认的ind 改变选中的背景颜色
this.ind=index;
//父组件传值给子组件
this.parentMsg=con;
}
}
}

子组件

<template>
<div class="row">
<p>{{message}}</p>
<!--<div class="col-sm-9">
<div><p>原创文章</p></div>
<div>
<div class="everycon" v-for="(item,index) in every">
<div>
<span><span>
<span></span>
</div>
<h2></h2>
<p></p>
<div>
<span>阅读全文</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>-->
</div>
</template> <script>
export default {
data(){
return{}
},
props:['message'],
methods:{ } }
</script>

  

vue系列(一)子组件和父组件的更多相关文章

  1. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  2. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  3. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  4. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  5. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  6. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  7. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件

    (标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...

  9. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

随机推荐

  1. MySQL(进阶)

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...

  2. 树莓派配置(一):打开SPI

    1.树莓派默认SPI关闭,在进行编程前需要打开SPI cd /boot/ sudo vi config.txt 将#dtparam=spi=off 改成:dtparam=spi=on 重启 sudo ...

  3. 关于nginx的使用感想

    感慨: 最近老板说要转型NodeJs,所以接连用ThinkJS框架写了2个项目(不过通篇弱类型不用考虑class是真的爽啊...).那天老板又正好让我看看Ngxin的负载均衡和静态资源处理,那现在就写 ...

  4. jq写的上拉刷新

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. KONG 安装 (在 CentOS 7 中)

    1. 下载安装包:  https://bintray.com/kong/kong-community-edition-rpm/download_file?file_path=centos/7/kong ...

  6. [sql Server]除非另外还指定了TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效

    今天遇到一个奇怪的问题,项目突然要从mysql切换到sql server数据库,包含order by 子句的嵌套子查询报错. 示例:select top 10 name,age,sex from ( ...

  7. Git Reference

    Installing and upgrading Git https://confluence.atlassian.com/bitbucketserver056/installing-and-upgr ...

  8. 牛客假日团队赛1B.便便传送门(一)

    链接:https://ac.nowcoder.com/acm/contest/918/B 题意: Farmer John最讨厌的农活是运输牛粪.为了精简这个过程,他制造了一个伟大的发明:便便传送门!与 ...

  9. nginx 添加https支持

    自行颁发不受浏览器信任的SSL证书为晒晒IQ网颁发证书.ssh登陆到服务器上,终端输入以下命令,使用openssl生成RSA密钥及证书. # 生成一个RSA密钥 $ openssl genrsa -d ...

  10. strstr strcpy 函数的实现

    一. strcpy 代码实现 #include <iostream> #include <assert.h> #include <iostream> //#incl ...