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

心已赠人 2023-08-17 16:39 76阅读 0赞

# 父子组件传值 #

### 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>