父组件获取子组件的值和方法

父组件：

html代码

 <!-- 父组件获取子组件的值 -->
 <v-header ref="headerTY"></v-header>
 <button @click="getData">父组件获取子组件的值和方法</button>

js代码：

<script>
import Header from './header';
export default {
  data(){
    return{
        msg:'这是一个首页组件',
        name:'首页',
        dataone:'首页第一个数据',
        title:'111'
    }
  },
  components:{
      'v-header':Header
  },
  methods:{
      getData(){
        // console.log(this.$refs.headerTY.msg)
        this.$refs.headerTY.run();
      },
      Yun(){
        alert('父组件')
      }
  }
 
 
}
</script>

子组件

html代码：

<template>
  <div id="app1">
    {{msg}}
    <button @click="getParent()">获取付父组件的值和方法</button>
   <hr>
  </div>
</template>

js代码：

<script>
export default {
  data(){
    return{
        msg:'这是一个头部组件',
        didi:''
    }
  },
  methods:{
    run(){
      alert(111)
    },
    getParent(){
      alert(this.$parent.name);
      
    }
  }
 
}
</script>

父组件通过引入子组件，并在子组件中加入属性ref="header",然后根据this.$refs.header来获取子组件的属性和方法。

子组件获取父组件的值和方法

在子组件中直接调用this.$parent来获取父组件中的值和方法即可。

父组件通过props给子组件传值

除此之外，父组件还可以通过props给子组件传值

父组件html代码：

<template>
  <div id="app">
   <h1>{{msg}}</h1>
   <!-- 父组件给子组件传值、传方法和父组件实例本身 -->
   <v-header :title="name" :dataOne="dataone" :run="Ale" :home='this' ref="headerTY"></v-header>
   <hr>
   <br>
  </div>
</template>

父组件js代码：

<script>
import Header from './header';
export default {
  data(){
    return{
        msg:'这是一个首页组件',
        name:'首页',
        dataone:'首页第一个数据',
        title:'111'
    }
  },
   components:{
      'v-header':Header
  },
  methods:{
      Ale(data){
        alert("这是父组件方法"+data)
      },
      Set(){
          alert(111)
      }
  }
 
 
}
</script>

子组件html代码：

<template>
  <div id="app1">
   <h2>{{msg}}--{{title}}--{{dataOne}}</h2>
   <button @click="run(111)">获取父组件方法</button><br>
   <button @click="GetData()">获取父组件实例</button>
   <br>
   <hr>
  </div>
</template>

子组件js代码：

<script>
export default {
  data(){
    return{
        msg:'这是一个头部组件',
        didi:''
    }
  },
  methods:{
      GetData(){
          this.home.Set();
      }
  }
 
  ,props:['title','dataOne','run','home']
}
</script>

这种方法是父组件通过子组件的标签声明变量属性，把父组件的值或者方法传递到子组件，除此之外也可以把父组件实例传递到子组件，如::home='this'就是。

而子组件可以根据props参数，通过传递过来的属性来获取父组件的属性值和方法。