VUE基础：组件CSS样式、props属性

VUE基础部分

组件css样式例子

<style lang="less">
// 这里记得改名，然后给div也加名字
.comName-container {
  padding: 10 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

并且App.vue中需要用到

.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}

css样式部分

首先：每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

scoped

防止样式冲突，能够使得只在这个组件中的h3变蓝，其他的组件不影响。

若无scoped则其他组件中的h3会跟着变蓝。

<style lang="less" scoped>
	h3 {
  color: blue;
}
</style>

/deep/

若要使得组件内的子组件的h5变色，添加此即可。

/deep/  h5 {
  color: blue;
}

vue组件中data的写法

组件中的错误写法：

vue组件中的错误写法：（不能指向对象！之前是在html中导入vue连接，而现在不行）
data {
username:'zs'
} 

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，
类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

正确的:

data() {
    return {
      message: 'hello vue.js',
      // 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！
      books: []
    }
}

props自定义属性

使用者通过自定义属性，为当前组件指定初始值。自定义属性的名字，是封装者自定义的（只要名称合法即可）

注意：props 是“只读”的，不要直接修改 props 的值，否则终端会报错！所以适合作为初始值。

自定义属性中，又附带已经定义的可用的属性：

• default：如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
• 定义init 的值类型必须是 Number 数字，不是则终端报错
• 必填项校验：要求init必须要传入

default: 0,
type: Number,
required: true

例：

不同的人调用可以产生不同的值，也就是Left和Right分别为9，6，是自己赋值的

①

首先，初始化一个Count组件

组件内的数据绑定方法区别

init是一个字符串："9"
	<MyCount init="9"></MyCount>

init是一个数字6
    <MyCount :init="6"></MyCount>

②MyCount组件中：

<template>
  <div>
    <h5>Count 组件</h5>
    <p>count 的值是：{{ count }}</p>
    <button @click="count += 1">+1</button>
    <!-- 若给这里的count赋值为字符串，则会一直增加为count11111，为数字则正常递增 -->
  </div>
</template>


<script>
export default {
  
  props: {
    init: {
      default: 0,
      type: Number,
      required: true
    }
  },

  data() {
    return {
      // 把 props 中的 init 值，转存到 count 上。毕竟data是可读可写的。
      count: this.init
    }
  }
}
</script>

Left中：

<MyCount :init="9"></MyCount>

Right中：

<MyCount :init="6"></MyCount>

结果：

当Left和Right分别调用这个组件加入到自己内部的时候，展示：