vue系列(一)子组件和父组件
父组件传递数据到子组件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系列(一)子组件和父组件的更多相关文章
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件
(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
随机推荐
- Java学习笔记(一)语法
基本语法 大小写敏感 类名:对于所有的类来说,类名的首字母应该大写 方法名:所有的方法名都应该以小写字母开头.如果方法名含有若干单词,则后面的每个单词首字母大写. 源文件名:源文件名必须和类名相同.当 ...
- CSS类名命名规则
CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 ...
- [笔记]解决git本地仓库不能上传到gitee远程仓库的问题
关键词:git.gitee.码云.上传远程仓库失败 1.gitee有一个远程仓库名字是CommandModel,里面只有两个README文件 2.假如我目录 D:\eclipse\workspace ...
- 飘逸的python - @staticmethod和@classmethod的作用与区别
一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmethod,就可以不需要实例化,直接类名.方法名()来调用. 这有利于组织代码,把某些应 ...
- Could not find iPhone X simulator
Could not find iPhone X simulator Error: Could not find iPhone X simulator at resolve (/Users/zhouen ...
- 洛谷P4114 Qtree1
题目描述 给定一棵\(n\)个节点的树,有两个操作: \(CHANGE\) \(i\) \(t_i\) 把第\(i\)条边的边权变成\(t_i\) \(QUERY\) \(a\) \(b\) 输出从\ ...
- Shape Number (最小表示法)
题目链接 一个字符串,这个字符串的首尾是连在一起的,要求寻找一个位置,以该位置为起点的字符串的字典序在所有的字符串中中最小. #include <bits/stdc++.h> using ...
- vue中一些常见错误
一:在抽取路由模块时路径没有更改过来 二:跨域的问题
- 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- selenium框架安装及webdriver安装
本文介绍的是selenium安装及webdriver安装.小实例 1.selenium介绍 selenium是一个用于web应用程序测试的工具. Selenium测试直接运行在浏览器,就向真正的用户操 ...