父子组件传值

父子组件之间的数据传递也是通过 props 和事件来实现的。父组件通过 props 向子组件传递数据，子组件通过触发自定义事件与父组件通信。以下是一个简单的示例
假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent

父传子（prop）

//父组件
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :parentMessage="messageToChild" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      messageToChild: 'Hello from Parent!'
    };
  }
}
</script>

在父组件中，我们导入并注册了 ChildComponent，我们通过 :parentMessage="messageToChild" 把 messageToChild 的值传递给子组件的 parentMessage 的prop

//子组件
<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的父组件数据: {{ parentMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    parentMessage: {
      type: String,
      required: true
    }
  }
}
</script>

在子组件中，我们定义了一个 props 对象，其中包含一个 parentMessage 属性，它是一个必需的字符串类型

子传父（$emit）

//子
<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的父组件数据: {{ parentMessage }}</p>
    <button @click="sendMessageToParent">发送消息给父组件</button>
  </div>
</template>
 
<script>
export default {
  name: 'ChildComponent',
  props: {
    parentMessage: {
      type: String,
      required: true
    }
  },
  methods: {
    sendMessageToParent() {
      this.$emit('child-to-parent', 'Hello from Child!');//触发一个名为 child-to-parent 的自定义事件，并传递消息
    }
  }
}
</script>

//父
<template>
  <div>
    <h1>父组件</h1>
    <p>从子组件接收到的消息: {{ messageFromChild }}</p>
    <ChildComponent 
      :parentMessage="messageToChild" 
      @child-to-parent="handleChildMessage" //监听子组件触发的事件，并在事件触发时调用 handleChildMessage 方法
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      messageToChild: 'Hello from Parent!',
      messageFromChild: ''
    };
  },
  methods: {
    //用于处理子组件触发的 child-to-parent 事件
    handleChildMessage(msg) { 
      this.messageFromChild = msg;
    }
  }
}
</script>

加一个 当父组件要调用子组件的方法时，可以使用 ref 来获取子组件的引用
 

//父
<template>
  <div>
    <h1>父组件</h1>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childComponent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 ref 获取子组件实例，并调用其方法
      this.$refs.childComponent.childMethod();
    }
  }
}
</script>

//子
<template>
  <div>
    <h2>子组件</h2>
    <p>子组件内容</p>
  </div>
</template>
 
<script>
export default {
  name: 'ChildComponent',
  methods: {
    childMethod() {
      console.log('子组件的方法被调用');
      alert('子组件的方法被调用');
    }
  }
}
</script>

当子组件调用父组件的方法时除了$emit 还有一个 

this.$parent.dunChange();