vue系列子组件和父组件

Posted 2020-09-23 zhangyx

父组件传递数据到子组件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>