Vue2 父子组件通信

案例一

父组件

<template>
  <div>
    <div @click="click">点击父组件</div>
    <child ref="child"></child>
  </div>
</template>

<script>
import child from "./groundCrudeOilImg";
export default {
      
      
  methods: {
      
      
    click() {
      
      
      this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
      this.$refs.child.callMethod() // 方法2:直接调用
    },
  },
  components: {
      
      
    child,
  }
}
</script>

子组件

<template>
  <div>子组件</div>
</template>

<script>
export default {
      
      
  mounted() {
      
      
    this.monitoring() // 注册监听事件
  },
  methods: {
      
      
    monitoring() {
      
       // 监听事件
      this.$on('childMethod', (res) => {
      
      
        console.log('方法1:触发监听事件监听成功')
        console.log(res)
      })
    },
    callMethod() {
      
      
      console.log('方法2:直接调用调用成功')
    },
  }
}
</script>

案例二

父组件

<template>
  <div id="app">
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
      <aaa ref="header"></aaa>
      <hr>
      首页组件
      <button @click="getChildData()">获取子组件的数据和方法</button>
    </div>
  </div>
</template>

<script>
/*
父组件给子组件传值
    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>
    2、在子组件里面通过 props接收父组件传过来的数据
        props:['title']
        props:{
            'title':String
        }
    3.直接在子组件里面使用
    
父组件主动获取子组件的数据和方法：
    1.调用子组件的时候定义一个ref
        <v-header ref="header"></v-header>
    2.在父组件里面通过
        this.$refs.header.属性
        this.$refs.header.方法

子组件主动获取父组件的数据和方法：
        this.$parent.数据
        this.$parent.方法
*/
import aaa from "./aa.vue";

export default {
      
      
  name: 'App',
  data(){
      
      
    return {
      
      
      msg:'我是一个首页组件',
      title:'首页111'
    }
  },
  components:{
      
      
    'aaa':aaa
  },
  methods:{
      
      
    run(){
      
      
      alert('我是首页组件的run方法');
    },
    getChildData(){
      
      
      // 父组件主动获取子组件的数据：
      alert(this.$refs.header.msg);
      // 父组件主动获取子组件的方法
      this.$refs.header.run()
      // 父组件主动获取子组件的方法返回值：
      alert(this.$refs.header.run())
    }
  }
}
</script>

<style>
#app {
      
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件

<template>
  <div>
    <h2>我是头部组件</h2>
    <button @click="getParentData()">获取子组件的数据和方法</button>
  </div>
</template>
<script>
export default {
      
      
  name: 'aa',
  data(){
      
      
    return{
      
      
      msg:'子组件的msg'
    }
  },
  methods:{
      
      
    run(){
      
      
      alert('我是子组件的run方法')
      return"我是子组件的run方法"
    },
    getParentData(){
      
      

      // 子组件主动获取父组件的数据和方法：
      this.$parent.msg
      this.$parent.方法
      alert(this.$parent.msg);
      this.$parent.run();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>