首页 > 代码库 > vue2中component父子组件传递数据props的使用
vue2中component父子组件传递数据props的使用
子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项。
组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据。修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改。
现在是传递对象的语法 app.vue(父组件):
<style scoped lang=‘stylus‘>
</style>
<template>
<div>
<h1>我是app组件</h1>
<zujian :http://www.mamicode.com/data="data"></zujian>
</div>
</template>
<script>
import zujian from ‘./components/zujian.vue‘
export default{
data(){
return{
data:{
a:1
}
}
},
components:{
zujian
}
}
</script>
zujian.vue(子组件):
<template>
<div>
<h1>{{data.a}}</h1>
<button @click="jia">+</button>
</div>
</template>
<script>
export default{
props:["data"], // 父亲传 谁用谁接受(儿子接受)
data(){
return{
}
},
methods:{
jia(){
console.log(this.data);
this.data.a++;
}
}
}
</script>
vue2中component父子组件传递数据props的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。