首页 > 代码库 > vue系列(一)子组件和父组件
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系列(一)子组件和父组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。