vue_组件基础

news2024/11/14 17:11:27

单文件组件

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中

<template>
  <h3>单文件组件</h3>
</template>


<script>
export default {
  name:"MyComponent"
}
</script>


<style scoped>
h3{
  color: red;
}
</style>

加载组件

第一步：引入组件 import MyComponentVue from './components/MyComponent.vue'

第二步：挂载组件 components: { MyComponentVue }

第三步：显示组件 <my-componentVue />

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

Props组件交互

组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了

Prop 是你可以在组件上注册的一些自定义 attribute

<my-componentVue title="标题"/>
<template>
  <h3>单文件组件</h3>
  <p>{{ title }}</p>
</template>

<script>
export default {
  name:"MyComponent",
  props:{
    title:{
      type:String,
      default:""
     }
   }
}
</script>

Prop 类型

Prop传递参数其实是没有类型限制的

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function
}

提示

数据类型为数组或者对象的时候，默认值是需要返回工厂模式(函数)

自定义事件组件交互

自定义事件可以在组件中反向传递数据，prop 可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit

<template>
  <h3>单文件组件</h3>
  <button @click="sendHandle">发送数据</button>
</template>


<script>
export default {
  name: "MyComponent",
  methods:{
    sendHandle(){
      this.$emit("onCustom","数据")
     }
   }
}
</script>


<style scoped>
h3 {
  color: red;
}
</style>

<template>
 <my-componentVue @onCustom="getData" />
</template>


<script>


import MyComponentVue from './components/MyComponent.vue'


export default {
 name: 'App',
 components: {
  MyComponentVue
  },
 methods: {
  getData(data) {
   console.log(data);
   }
  }
}
</script>