Vue中父组件与子组件之间的通信

prop 父组件向子组件传递数据, 单向绑定

$refs 父组件调用子组件里的属性和方法

$emit 子组件向父组件传递消息

新建项目

$ vue create demo
$ cd demo
$ npm run serve

1、父组件引用子组件

components/Child.vue

<template>
  <h2>子组件</h2>
</template>

App.vue

<template>
  <div id="app">
    <h2>父组件</h2>

    <!-- 3、使用子组件 -->
    <Child></Child>

  </div>
</template>

<script>
// 1、导入子组件
import Child from "@/components/Child.vue";

export default {
  name: "app",

  // 2、注册组件
  components: {
    Child // 键名与变量名相同， 等价于 Child: Child
  }
};
</script>

2、父组件给子组件传值

components/Child.vue

<template>
    <div>
        <h2>子组件</h2>
        <p>{{message}}</p>
    </div>
</template>

<script>
export default {
    name: "child",

    // 子组件属性，用于接收父组件数据, props是单向绑定
    props:[
        "message"
    ]
}
</script>

App.vue

<template>
  <div id="app">
    <h2>父组件</h2>

    <!-- 父组件通过属性给子组件传值 -->

    <!-- 静态绑定-->
    <Child message="hello"></Child>

    <!-- 动态绑定 -->
    <Child v-bind:message="message"></Child>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  data() {
    return {
      message: "hello child"
    };
  },

  components: {
    Child
  }
};
</script>

3、父组件操作子组件数据，方法

components/Child.vue

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

        <p>{{message}}</p>

    </div>
</template>

<script>
export default {
    name: "child",

    // 子组件属性
    data(){
        return {
            message: "",
        }
    },

    // 子组件方法
    methods:{
        setMessage(msg){
            this.message = msg;
        }
    }
}
</script>

App.vue

<template>
  <div id="app">
    <h2>父组件</h2>

    <!-- 注册子组件引用信息 -->
    <Child ref="child"></Child>

    <button @click="setChildMessage">修改子组件数据</button>

    <button @click="callChildMessage">调用子组件方法</button>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    setChildMessage() {
      this.$refs.child.message = "设置子组件属性"
    },

    callChildMessage(){
      this.$refs.child.setMessage("调用子组件方法");
    }
  }
};
</script>

​​$refs​​ 不是响应式的，只在组件渲染完成后才填充

4、子组件给父组件传值

components/Child.vue

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

    <!-- 点击按钮将会给父组件传值 -->
    <button @click="clickButton">子组件按钮</button>

  </div>
</template>

<script>
export default {
  name: "child",

  methods: {
    clickButton() {
      // 向父组件发送信号  vm.$emit(event, args)
      this.$emit("clickButton", "子组件的按钮被点击");
    }
  }
};
</script>

App.vue

<template>
  <div id="app">
    <h2>父组件</h2>

    <!-- 处理子组件的按钮点击事件 -->
    <Child @clickButton="childClickButton"></Child>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    // 接收处理子组件传递过来的数据
    childClickButton(message) {
      console.log(message);
    }
  }
};
</script>

参考：

vue之父子组件间通信实例讲解(props、$ref、$emit)【vue组件之间互相传值：父传子，子传父】

1.