Vue.js 组件化

Okarin 2021/4/5 Vue

# 组件化

使用props进行传值

props:["title","content"]

props:{
  title: String,
  content:{
    type:String,  //类型
    required:true, //必传
    default:"123" //默认
  }
}

1
2
3
4
5
6
7
8
9

可以使用type、require、default来限制传入的值。

如果传入的值是对象或者数组，那么默认值必须从一个工厂函数获取。

    props: {
      type: Object,//Array
      // 对象或数组默认值必须从一个工厂函数获取 不然会报错
      default() {
        return { message: 'hello' }
      }
    },

1
2
3
4
5
6
7

这是为了防止在多次使用组件时，使用同一个对象。

在 HTML 中的标签的大小写是不敏感的，所以浏览器会将所有的大写字符解释为小写字符。所以在使用时要使用短横线连接。