我们都知道在实践项目中会遇到组件与组件之间传值的情况，这里有最常见的三种情况，分别是: 父组件向子组件传递数据和方法 父组件主动获取子组件的数据和方法 子组件与子组件之间的数据和方法传递 所以我们先讲第一种情况：parents to children 父组件Component <template> <!-- 所有的内容要被根节点包含起来,只允许有一个根节点 --> <div id="home"> <v-header :title="title" :homemessage='message' :run="run" :home="this"></v-header> 首页父组件 </div> </template> <script> /* 父组件给子组件传值 * * 1.父组件调用子组件的时候 绑定动态属性 * <v-header :title="title"></v-header> * * 2、在子组件里面通过 props接收父组件传过来的数据 */ import Header from './Header.vue'; export default { data () { return { message:'我是一个首页父组件', title:'首页' } }, components: { 'v-header':Header }, methods: { run (data) { alert('我是Home组件的run方法'+data); } } } </script> <style lang="scss" scoped> /*css 局部作用域 scoped*/ h2{ color:red } </style> 子组件Component <template> <div id='header'> <h2>我是头部子组件--{{title}}---{{ homemessage }}</h2> <button @click="run('123')">执行首页父组件的方法</button> <button @click="getParent()">获取首页父组件的数据和方法</button> </div> </template> <script> export default{ props: ['title','home-message','run','home'],//子组件通过props属性获取父组件绑定的属性和方法 data () { return { message:'我是头部子组件的message' } }, methods: { getParent () { this.home.run() } } } </script> <style> </style>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复