vue父子组件间的相互访问方式

日期:2021-08-06 14:12:24    浏览:147

假如我们需要从子组件,去调用父组件的方法,或者数据(数据可以修改)

子组件访问父组件的方法,数据

我们在父组件定义一个方法

export default {
  name: "App",
  data(){
    return {
      title:'父传递到子页面',
      articles:[
          '1111111111',
          '2222222222',
          '3333333333'
      ]
    }
  },
  methods:{
//这里定义方法
    appOne(p){
      console.log('this is a APP' + p)
    }
  },
  components:{
    MyHeader,
    MySection,
    MyAside,
    MyFooter
  }
}

然后子组件去调用父组件的方法

export default {
  name: "MyAside",
  components:{
    MyList
  },
  methods:{
    one(){
    //用this.$parent.appOne("1111"),调用父组件的方法
//也可以用this.$root.直接调用根节点的方法
      this.$parent.appOne("1111")
      console.log(this.$parent.articles); //访问父组件的数据,当然也可以修改父组件的数据
    }
  }
}

 

父组件访问子组件的方法及数据

//我们在子组件定义一个one()方法,用来被父组件访问
export default {
  name: "MyHeader",
  props:['msg','title'],
  methods:{
    one(){
      return "我是子组件里面的方法"
    }
  }
}

父组件

<template>
    <header>
//这里定义一个one,two用来区别是哪个组件
      <MyHeader ref="one" msg="this is msg" :title="title" ></MyHeader>
      <MyHeader ref="two" msg="this is msg" :title="title" ></MyHeader>
      <button @click="childOne">调用子组件方法</button>
    </header>
    <main>
    <section>
    <MySection :articles="articles"></MySection>
    </section>
      <aside>
        <MyAside></MyAside>
      </aside>
    </main>
  <footer>
    <my-footer ></my-footer>
  </footer>
</template>

<script>
import MyHeader from "@/components/MyHeader";
import MySection from "@/components/MySection";
import MyAside from "@/components/MyAside";
import MyFooter from "@/components/MyFooter";
export default {
  name: "App",
  data(){
    return {
      title:'父传递到子页面',
      articles:[
          '1111111111',
          '2222222222',
          '3333333333'
      ]
    }
  },
  methods:{
    appOne(p){
      console.log('this is a APP' + p)
    },
    childOne(){
//this.$refs['']里面写需要访问哪个子组件的别名
      //通过 this.$refs['one'].one(),访问子组件one方法
     //也可以 this.$refs.one.one();
      console.log(this.$refs['one'].one())
    }
  },
  components:{
    MyHeader,
    MySection,
    MyAside,
    MyFooter
  }
}
</script>

 

Tags: vue

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事