子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项。
组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据。修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改。
现在是传递对象的语法 app.vue(父组件):
<style scoped lang=‘stylus‘> </style> <template> <div> <h1>我是app组件</h1> <zujian :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>
时间: 2024-10-25 02:47:22