六、vue进阶知识点

一、scoped解决样式冲突

默认情况 :写在组件中的样式会 全局生效→ 因此很容易造成多个组件之间的样式冲突问题。

1.全局样式:默认组件中的样式会作用到全局

2.局部样式:可以给组件加上 scoped 属性,可以让样式只作用于当前组件
scoped原理?

1.当前组件内标签都被添加 data-v-hash值 的属性

2.css选择器都被添加 [data-v-hash值]的属性选择器最终效果:必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到

两个自定义组件

BaseOne.vue

html 复制代码
<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* 
  1.style中的样式 默认是作用到全局的
  2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式,推荐加scoped(原理)
  -----------------------------------------------------
  scoped原理:
  1.给当前组件模板的所有元素,都会添加上一个自定义属性
  data-v-hash值
  data-v-5f6a9d56  用于区分开不通的组件
  2.css选择器后面,被自动处理,添加上了属性选择器
  div[data-v-5f6a9d56]
*/
div{
  border: 3px solid blue;
  margin: 30px;
}
</style>

BaseTwo.vue

html 复制代码
<template>
  <div class="base-one">
    BaseTwo
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
 div{
  border: 3px solid red;
  margin: 30px;
 }
</style>

App.vue

html 复制代码
<template>
  <div id="app">
    <BaseOne></BaseOne>
    <BaseTwo></BaseTwo>
  </div>
</template>

<script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {
  name: 'App',
  components: {
    BaseOne,
    BaseTwo
  }
}
</script>

main.js

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

效果(注意:未添加scoped属性!):

二、data是一个函数

data 是一个函数

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例,维护独立的一份数据对象。

BaseCount.vue

html 复制代码
<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // data() {
  //   console.log('函数执行了')
  //   return {
  //     count: 100,
  //   }
  // },
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

App.vue

html 复制代码
<template>
  <div class="app">
    <baseCount></baseCount>
    <baseCount></baseCount>
    <baseCount></baseCount>
  </div>
</template>

<script>
import baseCount from './components/BaseCount'
export default {
  components: {
    baseCount,
  },
}
</script>

<style>
</style>

效果(三个count是独立的,互不影响的):

三、组件通信

组件通信,就是指 组件与组件 之间的数据传递。

  • 组件的数据是独立的,无法直接访问其他组件的数据。
  • 想用其他组件的数据 →组件通信

不同的组件关系和组件通信方案分类

1.组件关系分类:

①.父子关系(图中B和C组件和A组件构成父子关系)

②.非父子关系(组件B与C构成非父子关系)

2.组件通信解决方案:

①.父子关系:props和$emit

②.非父子关系:provide&inject / eventbus

③.通用解决方案:Vuex(适合复杂业务场景)

3.父子通信流程图:

①父组件通过props将数据传递给子组件

②子组件利用$emit通知父组件修改更新

核心代码实现:

父传子

子传父

4.父子通信方案的核心流程

父传子props:

① 父中给子添加属性传值 ② 子props 接收 ③ 使用

子传父$emit:

① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

5.prop 详解

Prop定义:组件上注册的一些自定义属性

Prop作用:向子组件传递数据

特点:

  • 可以传递任意数量的prop
  • 可以传递任意类型的prop (字符串,整型,布尔,对象,数组)

案例:

html 复制代码
<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>
html 复制代码
<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名:{{username}}</div>
    <div>年龄:{{age}}</div>
    <div>是否单身:{{isSingle}}</div>
    <div>座驾:{{car.brand}}</div>
    <div>兴趣爱好:{{hobby.join('、')}}</div>
  </div>
</template>

<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

6.props校验

**思考:**组件的prop可以乱传么?

作用: 为组件的prop指定验证要求,不符合要求,控制台就会有错误提示-->帮助开发者,快速发现错误

语法:

①类型校验
②非空校验

③默认值
④自定义校验

代码:

BaseProgress.vue

html 复制代码
<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // 1.基础写法(类型校验)
  // props: {
  //   w: Number,
  // },

  // 2.完整写法(类型、默认值、非空、自定义校验)
  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>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

7.单项数据流

prop & data

共同点:都可以给组件提供数据。

区别:

  • data 的数据是自己的 → 随便改
  • prop 的数据是外部的 →不能直接改,要遵循 单向数据流

单向数据流:父级 prop 的数据更新,会向下流动,影响子组件。这个数据流动是单向的。

口诀:谁的数据,谁负责。

代码:

html 复制代码
<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  (谁的数据 谁负责)
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>
html 复制代码
<template>
  <div class="app">
    <BaseCount :count="count" @changeCount="handleChange"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handleChange(newVal){
      // console.log(newVal);
      this.count = newVal
    }
  }
}
</script>

<style>

</style>
相关推荐
brief of gali9 分钟前
记录一个奇怪的前端布局现象
前端
计算机毕设指导613 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者1 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理