您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

15父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法(组件传值)

发布时间：2023-04-10 12:20:35编辑：雪饮阅读（）

除了上篇了解到的父子组件传值通过props的方式以外，下面这种通过ref以及$parent的方式传值更简洁方便。这种主动获取的方式，是我决定比较非常不错的。
实例App.vue如
<template>
  <div id="app">
     <button @click="function_child">获取子组件数据和执行子组件方法</button>
    <v-header ref="header"></v-header>
  </div>
</template>
 
<script>
    import header from './components/header.vue'
    export default {    
      data () {
        return {
          flag001:"我是父组件的flag001",
          flag002:"我是父组件的flag002"
        }
      },
      methods:{
        function_child(){
            console.log("子组件flag001:"+this.$refs.header.flag001);
            alert(this.$refs.header.functc());
          },
        function_b(){
          alert("我是父组件function_b方法");
        }
      },
      components:{
        "v-header":header
      }
    }
</script>
实例header.vue如
<template>
    <div>
        <button @click="function_parent">获取父组件数据和执行父组件方法</button>
    </div>
</template>
<script>
 
export default{
    data(){
        return {
            flag001:"我是子组件的flag001"
        }
    },
    methods:{
        functc(){
            console.log("子组件functc方法被执行");
          },
        function_parent(){
            console.log("父组件flag001:"+this.$parent.flag001);
            this.$parent.function_b();
        }
    },
}
</script>