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

Vue--props

时间:2017-07-07 21:24:53      阅读:436      评论:0      收藏:0      [点我收藏+]

标签:com   span   组件   eof   guide   blog   ack   字符串   type   

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。

字面量语法 vs 动态语法

初学者常犯的一个错误是使用字面量语法传递数值:

因为它是一个字面 prop,它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number,需要使用 v-bind,从而让它的值被当作 JavaScript 表达式计算:

App.vue  (父组件)

<template>

<div>

<h1>我是app组件</h1>

<zujian :color="111"></zujian>

</div>

</template>

<script>

import zujian from ./components/zujian.vue

export default{

data(){

return{

a:1

}

},

components:{

zujian

}

}

</script>

Zujian.vue(子组件)

<template>

<div>

<h1>我是zujian组件 {{typeof color}}---{{color}}</h1>

</div>

</template>

<script>

export default{

props:["color"],  // 父亲传 谁用谁接受(儿子接受)

data(){

return{

 

}

}

}

</script>

 更多请访问:https://cn.vuejs.org/v2/guide/components.html#Prop

Vue--props

标签:com   span   组件   eof   guide   blog   ack   字符串   type   

原文地址:http://www.cnblogs.com/pms01/p/7133921.html

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