Vue框架学习（五）

一、组件样式冲突解决

写在组件中的样式会全局生效，因此导致多个组件之间的样式冲突问题。

• 全局样式：默认组件中的样式会作用到全局。
• 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件。

scoped原理

• 当前组件内标签都被添加data-v-hash值的属性。
• css选择器都被添加[data-v-hash值]的属性选择器。

最终效果就是必须是当前组件的元素，才会有这个自定义属性，才能被这个样式给作用到。

<style scoped>
/* 在组件的style里添加一个scoped就行*/
  div{
    border: 3px solid blue;
    margin: 30px;
  }
</style>

二、data是一个函数

一个组件里的data选项必须是一个函数，用来保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会重新执行一次data函数，得到一个新对象。

<script>
  export default {
    // 使用这种方式来传值，可以确保每个组件只用自己的值，互不干扰
    data: function () {
      return {
        count: 100,
      }
    },
  }
</script>

三、组件通信

组件通信就是指组件与组件之间的数据传递。组件之间的数据是独立的，无法直接访问其他组件的数据。如果需要用其他组件的数据就需要组件通信。

父子组件通信

（1）父组件通过props将数据传输给子组件。

在父组件中传递分为三步：

• 给父组件标签，添加属性，用来传值，传的值要和data里面的值同名。
• 子组件的方法中使用props进行接收父组件传过来的值。
• 子组件使用{{ }}进行渲染使用父组件的值

<!--  父组件里的内容-->
<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
    }
  },
  components: {
    Son,
  },
}
</script>

<style>
</style>



<!--子组件里的内容-->
<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{title}}
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title']
}
</script>

<style>

</style>

（2）子组件使用$emit通知父组件修改更新。

• 子组件使用$emit触发事件，给父组件发送修改消息通知。
• 父组件添加一个监听事件，监听事件名要和子组件传递的触发事件要一致。
• 父组件方法要添加一个处理函数，形参用来获取参数，进行修改。

<!--子组件内容-->
<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }}
    <button @click="changeFn">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle','传智教育')
    },
  },
}
</script>

<style>
</style>



<!--父组件内容-->
<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2.父组件对子组件的消息进行监听 -->
    <Son :title="myTitle" @changTitle="handleChange"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.提供处理函数，提供逻辑
    handleChange(newTitle) {
      this.myTitle = newTitle
    },
  },
}
</script>

<style>
</style>

props校验

为组件的prop指定验证要求，不符合要求，控制台就会有错误提示。

语法：

• 类型检验
• 非空检验
• 默认值检验
• 自定义检验

<script>
  export default {
    // 完整写法（类型、默认值、非空、自定义校验）
    props: {
      w: {
        type: Number,
        required: true,
        default: 0,
        validator(val) {
          // console.log(val)
          if (val >= 100 || val <= 0) {
            console.error('传入的范围必须是0-100之间')
            return false
          } else {
            return true
          }
        },
      },
    },
  }
</script>