码迷,mamicode.com
首页 > 其他好文 > 详细

vue 父组件向子组件传参

时间:2020-02-03 16:03:00      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:app   red   ons   默认值   lang   required   array   com   元素   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../JS/vue.js"></script>
<body>
<!--父亲组件-->
<div id="app">
<cpn v-bind:arg1="messagqe" :arg2="movies"></cpn>
</div>
<!--父亲组件-->

<!--组件-->
<template id="cpn">
<div >
<!--    上面的div一定要加的一定要有个父级元素才能显示-->
{{arg1}}
{{arg2}}
 <ul>
     <li v-for="item in arg2">{{item}}</li>
 </ul>
</div>

</template>
<!--组件-->

<script>
    //父传子使用props
    const cpn={
        template:"#cpn",
      //第一种  props:["arg1","arg2"],
     //第二种   props:{arg1:String,arg2:Array},
        props:{
            arg1:{type:String,default:"默认值1",required:true},//true是需要参数
            arg2:{type:Object,default:"默认值2",required:true}
        },

        data()//必须以函数xingshi
        {
         return{};
        }


    }

    const app =new Vue({
        el:"#app", //挂载那个元素
        data:{ messagqe:"胡鸡鸡", movies:["qq","www","aiai","saosao"]},
        components:{
            cpn
        }

    })

</script>
</body>

</html>

  直接上函数不逼逼

vue 父组件向子组件传参

标签:app   red   ons   默认值   lang   required   array   com   元素   

原文地址:https://www.cnblogs.com/xuexidememeda/p/12255540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!