简单的组件化开发

组件就是 xx.vue

<!-- 第二部分 -->
<!--  以后在这个对象中写咱们之前学的data，methods，watch，computed，生命周期钩子 -->
<script>
export default {
  data() {
    return {
      name: 'szw'
    }
  },
  props:["msg"]
}
</script>
<!-- 第一部分 -->
<!-- 组件必须套在一个标签内部，之前用反引号写的html内容 -->
<template>
  <h1>{{msg}}</h1>
  <div><span @click="name='szw2'">{{  name  }}</span></div>
</template>
<!-- 第三部分：这里面写样式 -->
<style>
span{
  color: red;
}
</style>

在根组件App.vue 中使用这个组件

<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
export default{
  data() {
    return {
      msg:'父'
    }
  },
  // 注册组件
  components:{
    HelloWorld,
  }
}

</script>

<template>
  <div>
    <h1>组件化开发</h1>
    <HelloWorld :msg="msg" />
  </div>
</template>

<style scoped>
</style>