Vue 父组件与子组件之间传值
一、父组件与子组件之间值传递步骤如下:
例如:我有一个父组件Myhome.vue 和一个子组件Header.vue
1、父组件调用子组件的时候,动态绑定属性值
<v-myheader :title="title"></v-myheader>
2、在子组件使用 props 来接受父组件传过来数据(props:['title']),如果是多个就定义多个属性就可以
完整代码如下:
1、Myhome.vue(父组件)代码如下:
<template> <div id="homeapp"> <h1>这是一个home123</h1> <v-myheader :title="title"></v-myheader> </div> </template> <script> import MyHeader from './Header.vue'; export default { name:'myhome', data () { return { title:'父类数据' } } ,components :{ 'v-myheader':MyHeader } } </script>
2、Header.vue(子组件)代码如下:
<template> <div id="headerapp"> <h3>这是头部组件(子组件)</h3> <h2>父类数据--{{title}}</h2> </div> </template> <script> export default { data() { return { msg:'mgs' } },methods:{ } ,props:['title'] } </script>
2、除了传递属性以外还能传递方法和父组件的对象,如果是传递父组件的对象,那么在子组件里就能通过父组件对象获取属性和方法、数据
代码如下:
父类组件代码如下:
<template> <div id="homeapp"> <h1>这是一个home123</h1> <v-myheader :title="title" :show='show' :home="this"></v-myheader> </div> </template> <script> import MyHeader from './Header.vue'; export default { name:'myhome', data () { return { title:'父类数据' } } ,methods:{ show(a) { alert('我是父组件方法'+a); } } ,components :{ 'v-myheader':MyHeader } } </script>
其中:
:show='show'->表示传递方法
:home="this"->表示传递父类实例对象
子组件代码如下:
<template> <div id="headerapp"> <h3>这是头部组件(子组件)</h3> <h2>父类数据--{{title}}</h2> <button @click="show(123)">调用父类方法</button> <button @click="getparentdata()">获取父组件数据和方法</button> </div> </template> <script> export default { data() { return { msg:'mgs' } },methods:{ getparentdata (){ alert(this.home.title); } } ,props:['title','show','home'] } </script>
三、父组件主动获取子组件的方法和属性
1、调用子组件的时候定义一个ref
v-myheader ref="header"></v-myheader>
2、在父类通过
属性获取:this.$refs.header.属性
方法获取:this.$refs.header.方法
四、子组件主动获取父组件方法和属性
属性获取:this.$parent.属性
方法获取:this.$parent.方法