Vue3组件

基础组件

创建MyCompose1.vue

在App.vue引入

scoped是指在当前组件生效

组件注册方式

局部注册

  components:{
    MyCompose1,
  }

全局注册 在main.js操作

import MyCompose1 from "@/components/MyCompose1.vue";
//const变量不能被修改
const app = createApp(App);
app.mount('#app')
app.component('MyCompose', MyCompose1)

组件之间传递数据(props)

定义两个组件

App.vue

<template>
  <MyCompose1></MyCompose1>

</template>


<script>
//引入组件
import MyCompose1 from "@/components/MyCompose1.vue";

export default {
  name: "App",
  data(){
    return{

    }
  },
  components:{
    MyCompose1
  }
}

</script>

组件1

<template>
  <div>
    <p>我是组件1</p>
    <MyCompose2></MyCompose2>

  </div>
</template>

<script >
import MyCompose2 from "@/components/MyCompose2.vue";
export default{
  name: "MyCompose1",
  data(){
    return{

    }
  },
  components:{
    MyCompose2
  }
}
</script>
<style scoped>

</style>

组件2

<template>
  <div>
    <p>我是组件2</p>

  </div>
</template>

<script setup>

</script>
<style scoped>

</style>

props组件传递

组件1

<p>我是组件1</p>
<MyCompose2 title="我是传递的参数"></MyCompose2>

组件2

<template>
  <div>
    <p>我是组件2</p>
    <p>{{title}}</p>

  </div>
</template>

<script>
export default {
  name: 'MyCompose2',
  data: function(){
    return{

    }
  },
  props:["title"]
}

</script>

注意props能接受上一组件的参数也可以倒反天罡(这里不作演示

数据校验/默认值

props修改类型检测(但这不是强制的

props: {
  title:{
    type:String,
    default:"1100",
  //必选项
    required:true,
  }
}

组件事件(实现子传父)

传统的事件感觉太麻烦了，这里给个简单的

methods:{
  toPa:function () {
    this.$parent.Fmethod()
  }
},

父类

methods:{
  Fmethod:function () {
    console.log("我被调用了");
  }
},

也可以传参数，