this.$emit与this.$refs

this.$emit是Vue.js中用于组件间通讯的方法，主要用于子组件向父组件传递消息。

举个例子，假设有一个父组件ParentComponent和一个子组件ChildComponent，子组件需要将一些信息传递给父组件。在子组件中，可以使用this.$emit方法发一个自定义事件，并将需要传递的信息作为参数传入。父组件可以监听这个自定义事件，并在事件回调中获取传递信息。

以下是一个简单的示例：

<!-- ParentComponent.vue -->
template>
  <div>
    <child-component @child-message="handleChildMessage"></child-component>
    <p>Parent: {{receivedMessage}}</p>
  </div>
</template<script>
  import ChildComponent from './ChildComponent.vue';
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
       Message: ''
      }
    },
    methods: {
      handleChildMessage(message) {
        this.receivedMessage = message;
      }
    }
  }
</>


<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
 : {
    sendMessage() {
      const message = 'Hello from child!';
      this.$emit('child-message', message);
    }
  }
}
</script>

在上述示例中，子组件ChildComponent中的按钮被点击时，会调用sendMessage方法，该方法通过this.$emit('child-message', message)触发了一个名为child-message的自定义事件，并将message`作为参数传递给父组件。

父组件ParentComponent在模板中监听了child-message事件@child-message，并将触发事件时传递的消息保存在receivedMessage数据中。从而实现了子组件向父组件的通信。当子组件中的按钮被点击时，父组件会在界面上显示收到的消息。

总结起来，this.$emit方法是用来在子组件中触发自定义事件并向父组件传递数据，实现了子组件向父组件的通信。

this.$refs用于在Vue.js中获取组件或DOM元素的引用，以便于在组件内对其进行操作或访问其属性和方法。

以下是一个示，以说明this.$refs的用法：

<!-- ParentComponent.vue<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="accessChildComponent">Access Child Component</button>
  </div>
template>

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

export default {
  components: {
    ChildComponent
  },
 methods: {
    accessChildComponent() {
      const childComponent = this.$refs.childRef;
      // 通过$refs属性获取到子组件的引用，通过这个引用可以操作子组件
      childComponent.child(); // 调用子组件中的方法
      console.log(childComponent.childProperty); // 访问子组件中的属性
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>I am the child component.</p>
  </div>
</template>

<script>
export default {
  methods: {
    child() {
      console.log("Child component method called.");
    }
  },
  data() {
    return {
      childProperty: "This is a child property."
    }
  }
}
</script>

在上述示例中，父组件ParentComponent中通过<child-component ref="childRef"></child-component>将子组件ChildComponent赋予了一个引用名为childRef。然后，在父组件的accessChildComponent方法中，可以通过this.$refs.childRef获取到子组件的引用。通过这个引用可以调用子组件的方法、访问子组件的属性，实现对子组件的操作。

在本例中，点击父组件中的按钮时，会调用accessChildComponent方法。该方法中通过this.$refs.childRef获取到子组件的引用，并调用childMethod方法和访问childProperty属性。

总结来说，this.$refs允许在Vue.js中获取组件或DOM元素的引用，便于在组件内对其进行操作或访问其属性和方法。