zoukankan      html  css  js  c++  java
  • Vue组件传值

    1.首先你有得有一个父组件和子组件(我这里父组件为HomePage,子组件为Prop)

     2.在父组件调用子组件

    3.在子组件(Prop.vue)中用props接收父组件传过来的值(我这里写了点样式和循环出传过来数组的属性)

     4.最后在父组件,在父组件中写

     完整代码如下:

    父组件:

    <template>
    <div>
    <!--父组件传值在子组件并显示,次为父组件-->
    <prop :sty="sty"></prop>
    </div>
    </template>

    <script>
    import Prop from "./Prop";
    export default {
    name: "HomePage",
    components: {Prop},
    data () {
    return{
    sty:[{name:"1",sex:"3"},{name:"2",sex:"3"}]
    }
    },
    watch :{},
    mounted(){
    // debugger
    },
    methods:{
    }
    }
    </script>

    <style scoped>
    .headr{
    flex: 0 0 49.46%;
    font-size: 2.8vw;
    text-align: center;
    line-height: 12vh;
    height: 12vh;
    border-right: 0.2vw solid #414141;
    }
    .headtel{
    flex-wrap: wrap;
    display: flex;
    flex: 0 0 33%;
    background-color: #000000;
    color: #008000;
    height: 100%;
    text-align: center;
    line-height: 15vh;
    font-size: 5vw;
    border-left: 0.2vw solid #414141;
    border-right: 0.2vw solid #414141;
    }
    </style>

    ================================
    子组件:
    <template>
    <div>
    <!--父子组件传值,此为子组件-->
    <div style="font-size: 3vw;color: black" v-for="(item,index) in sty" :key="index">
    <div>{{item.name}}</div>
    </div>
    </div>
    </template>

    <script>
    export default {
    name: "Prop",
    props:["sty"],
    data(){
    return{
    sun:""
    }
    },
    mounted(){
    }
    }
    </script>

    <style scoped>

    </style>
  • 相关阅读:
    AIO 异步时间非阻塞I/O
    学习计算机视觉(持续更新中..)
    转:Dropout解决过拟合问题
    转:non-saturating nonlinearity
    numpy, matplotlib, pandas 精品教程
    转:计算机视觉竞赛平台汇总
    计算机视觉:rcnn、fast-rcnn、faster-rcnn、SSD、YOLO
    转: 批标准化Batch Normalization
    用PCA对鸢尾花数据集降维并可视化
    Python实现PCA降维
  • 原文地址:https://www.cnblogs.com/Zbaozi/p/11679437.html
Copyright © 2011-2022 走看看