VUE 父子组件传值以及父子组件触发对方的方法

父子组件传值

1、父传子

父传子主要通过在父组件 v-model 绑定数据，在子组件进行用 props 进行数据的接收

父组件

<template>
    <div id="container">
        <Child :msg="data"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      data: "我是父组件"
    };
  },
  methods: {
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

子组件

<template>
    <div id="container">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:["msg"]
};
</script>
<style scoped>
 
</style>

2. 子传父

子传父主要通过 this.$emit 方式来触发父组件的自定义事件，在父组件监听自定义事件，从而接收数据

父组件

<template>
    <div id="container">
        <Child @getData="getData"></Child>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

子组件

<template>
    <div id="container">
        <button @click="sendData">传递</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data: "我是子组件"
    };
  },
  methods: {
    sendData() {
      this.$emit("getData", this.data);
    }
  }
};
</script>
<style scoped>
 
</style>

父子组件触发对方的方法

1. 父组件触发子组件的方法

主要通过 $refs 来触发

父组件

<template>
  <div>
    <button @click="getData">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      getData() {
        this.$refs.mychild.showData();
      }
    }
  }
</script>

子组件

<template>
  <div>
    
  </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      showData() {
        alert("我是被父组件触发的方法")
      }
    }
  }
</script>

2. 子组件触发父组件的方法

这个的话也是主要用 $emit 来触发，并且可以传递参数

父组件

<template>
    <editor id="editor" class="editor" @showData="showData"></editor>
</template>
<script>
export default {
  methods: {
    showDate(data) {
      alert(data)
    }
  }
}
</script>

子组件

<template>
    <button @click="submit">触发父组件方法</button>
</template>
<script>
export default {
  methods: {
    submit: function () {
      this.$emit('showData', '我是子组件，老触发父组件')
    }
  }
}
</script>