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

vue组件值传递之父组件向子组件传递(props)

时间:2018-09-18 14:59:30      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:message   for   ack   attr   传递   this   ESS   round   设置   

 

 

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul>
            <li v-bind="message" v-for="item in message">{{item}}
            </li>
        </ul>
        <test v-bind:child_message="message"></test>
    </div>
</template>

<script>
  export default {
    name: Hi,
    data :function() {
      return {
        msg: HI,
        message:[11,22,33,44,55,66]
      }
    },
    components:{
      "test":{
        template:`<div><li v-for=item in child_message >传递到子组件的值:{{item}}</li></div>`,
        props:[child_message]
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

另:props也可以做值验证 ,和设置默认值

        props:{
          child_message:{
            type:Array,
            default:function(){
              return [1,2,3,4,5,6,74];
            }
          }
        }

 

vue组件值传递之父组件向子组件传递(props)

标签:message   for   ack   attr   传递   this   ESS   round   设置   

原文地址:https://www.cnblogs.com/fps2tao/p/9668760.html

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