msg的值在父组件里，在app.vue里
给子组件helloworld.vue里的msg传值。

好好体会一下。

emits又是怎样使用呢？
哪些情况下，什么情况下，子组件需要给父组件传值呢？

父组件

<template>
  <div id="app">
    <HelloWorld
      style="color:red"
      class="hello"
      msg="Welcome to follow me!"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

子组件

<template>
  <div class="world" style="text-align:center">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

vite npm的文件包修改过来的。
很成功哦。

父组件里面有import ，从子组件文件夹component里引用出HelloWorld.vue组件的HelloWorld来使用。
子组件中对组件名字命了名，name:“Helloworld”

实际规划过程中，怎么知道msg这段话是应该放在父组件里，还是子组件里呢？

找一个子传父的案例，
是一个什么样不同的案例呢，
什么情况下就应用子传父，什么情况下就应用父传子呢。