vue组件化开发、vue组件封装使用步骤、scoped实现组件的私有样式、vue组件通信、父传子、子传父

九九nine9

已于 2022-05-09 11:51:59 修改

阅读量1.1k

点赞数 2

分类专栏： Vue基础文章标签： vue.js javascript 前端

于 2022-05-07 20:57:24 首次发布

本文链接：https://blog.csdn.net/weixin_65100963/article/details/124638538

版权

Vue基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

vue组件化开发

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

vue组件分类：

页面组件
页面下的功能组件

组件化开发 ：一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能

● 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的开发和维护

一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构（template）样式(style) 和行为(script) (html, css和js)
在这里插入图片描述

小结

● 现代前端开发均会使用组件化的开发思路
● 组件化开发有利于解决代码重复、冗余等问题

vue组件-封装使用

为啥要封装组件

复用。一次封装，多次使用
代码整理，方便维护。

步骤

定义组件
注册组件
使用组件

在这里插入图片描述

案例

定义一个名为MyCom的组件，并在App.vue中使用它

目录
├── App.vue  # 在App.vue内部，导入并使用组件
└── MyCom.vue

创建组件： MyCom.vue 组件名开头大写驼峰(推荐)
引入并注册组件

// 局部注册组件

// 进入到当前组件内部
// 1. 导入组件
import 组件名 from './组件文件.vue'

// 2. 局部注册
export default {
   components: {
     组件名: 组件名
   }
}

使用组件。在当前页面中，当做标签来使用。
注意：
组件名不能与现有的html标签名一致。

小结

● 每一个组件都是封闭的。它有自己的template, script，style
● 组件之间可以相互引用使用。

vue组件-用scoped实现组件的私有样式

目标

解决多个组件样式名相同, 冲突问题

问题说明

默认组件style 中定义的样式是全局=》存在相同名字覆盖的情况
在这里插入图片描述

解决方案

局部样式：在style标签上加上scoped属性

<stype scoped>
  h2 {} // 样式只会在当前组件内生效
</style>

原理

● 在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
● 而且必须是当前组件的元素或者子组件的根元素, 才会有这个自定义属性
在这里插入图片描述

小结

style上加scoped, 组件内的样式只在当前vue组件生效；相反，样式就是全局的

vue组件-/deep/深度作用选择符

问题导入

当父子组件都使用了scoped的情况下，如何在父组件中控制子组件的样式？

解决方案

父组件的选择器 /deep/ .子组件的选择器

父组件：

<template>
  <div class="box">
    <h1 class="red">父组件</h1>
    <hr />
+    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  components: {
    Child,
  },
}
</script>

<style scoped>
.red {
  color: blue;
}
+ .box /deep/ h2 {
+  color: lawngreen;
+ }
</style>

子组件：

<template>
  <div>
     <h2>子组件</h2>
     <p class="red">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {

}
</script>

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

小结

父组件中控制子组件元素或类名，覆盖样式=》需要在前边加上 /deep/

注意⚠️：默认子组件的根元素，会带上父组件的data-v-hash属性，所以可以直接控制

vue组件通信

背景

一个页面有多个组件构成
每个组件之间的数据是相互独立的

问题：如何在组件之间做通讯？

因为每个组件的变量和值都是独立的=》如果想获取对方页面中定义的变量应该怎么做？

在这里插入图片描述
组件通信先暂时关注父传子（数据从父组件传递给子组件）, 子传父（数据从子组件传递给父组件）

● 父: 使用其他组件的vue文件

● 子: 被引入到这个vue文件的组件(嵌入)

vue组件通信_父传子

父子组件

如果一个组件A在组件B中被导入使用，称组件B是父组件，组件A是子组件

格式

在这里插入图片描述

示例代码

父组件 : 在子组件的标签中添加 :自定义属性名="值"

<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
  <h1>父组件</h1>
  <!-- 1. 父传。自定义属性 -->
  <MyCom :abc="userName" :list="hobby"/>
  </div>
</template>

<script>
  // 导入->注册->使用
  import MyCom from './MyCom.vue'
  export default {
    data(){
      return {
        userName: '小花',
        hobby: ['vue','react']
      }
    },
    components: { MyCom }
  }
</script>

<style>
  
</style>

子组件 : props: [‘自定义的属性名’']

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <!-- 使用 -->
    {{abc}}
    <p>
      {{list[0]}}
    </p>
    <button @click="fn">打印</button>
  </div>
</template>

<script>
export default {
  // 2.子接
  props: ['abc', 'list'],
  methods: {
    fn(){
      console.log(this, this.abc)
      
    }
  }
}
</script>

<style>

</style>

在这里插入图片描述
props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接

vue组件通信_父向子-循环复用

目标

对子组件使用v-for循环，把数据循环分别传入给组件内显示

<template>
  <div>
    <MyProduct v-for="obj in list"
    :title="obj.proname" 
    :price="obj.proprice" 
    :info="obj.info"
    :key="obj.id"></MyProduct>
  </div>
</template>

<script>
import MyProduct from "./components/MyProduct_13.1";
export default {
  data() {
    return {
      list: [
        { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
        { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
        { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
      ],
    };
  },
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>

vue单向数据流-不要修改props

在vue中需要遵循单向数据流原则

在父传子的前提下，父组件的数据发生会通知子组件自动更新
子组件内部，不能直接修改父组件传递过来的props => props是只读的

父组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>31-vue单向数据流-父组件</h1>
    <MyCom
      :name="name"
      :hobby="hobby"/>
      <button @click="fn">改数据</button>
  </div>
</template>

<script>
// 导入
import MyCom from './MyCom.vue'
export default {
  data(){
    return {
      name: '小花',
      hobby:['vue', 'react']
    }
  },
  components: { MyCom },
  methods: {
    fn(){
      this.name = '小花花'
      this.hobby.push('小程序')
    }
  }
}
</script>

<style>

</style>

子组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <p>
      name: {{name}}
    </p>
    <p>
      hobby: {{hobby}}
    </p>
    <button @click="fn">修改props</button>
  </div>
</template>

<script>
export default {
  props: ['name', 'hobby'],
  methods: {
    fn(){
      // 直接去修改props ===> 改了父组件传来的数据
      // 这里打破 单向数据流的规则，vue能捕获到错误
      // this.name = '小花花'

      // 这里打破 单向数据流的规则，vue能不能捕获到错误
      // hobby是引用数据类型，push并没有修改 数组的地址  但是赋值会修改地址
      this.hobby.push('小程序')
    }
  }
}
</script>

<style>

</style>

子组件的v-model绑定的值如果是父传子的,会导致修改props
在这里插入图片描述
特殊说明

说明：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址

小结

props的值不能重新赋值, 但是引用类型可以子改父,最好不要改

vue组件通信_子传父

子传父是指：从子组件内部把数据传出来给父组件使用或者修改父组件数据
在这里插入图片描述

语法

● 父组件中：< 子组件 @自定义事件名1=“父methods函数1” @自定义事件名2=“父methods函数2” />
● 子: this.$emit(“自定义事件名1”, 传值1) —> 执行父methods里函数代码
在这里插入图片描述
父组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>32-子传父</h1>

    <!-- 1. 添加事件监听 -->
    <!-- 当子组件发生了abc事件要执行fn函数 -->
    <MyCom @abc="fn"/>
  </div>
</template>

<script>
// 导入
import MyCom from './MyCom.vue'
export default {
  components: { MyCom },
  methods: {
    fn(obj){
      console.log('fn-子组件发生了abc事件',obj)
    }
  }
}
</script>

<style>

</style>

子组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <button @click="fn">触发abc事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn(){
      console.log('子组件click')
      // 2. 触发abc事件
      this.$emit('abc',{name:'小花'})
    }
  }
}
</script>

在这里插入图片描述

小结

自定义事件 + $emit

拓展-全局注册

全局入口在main.js, 在new Vue之上注册

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

main.js

import Vue from 'vue'
import App from './App.vue'
+ import Pannel from './components/Pannel' // 引入组件文件对象

+ Vue.component("PannelCom", Pannel) // 组件名开头大写驼峰(推荐) => 全局注册一个组件

Vue.config.productionTip = false

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

全局注册PannelCom组件名后, 就可以当做标签在任意template里用

单双标签都可以, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置

在页面中使用：

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <PannelCom></PannelCom>
    	<!-- or -->
    <PannelCom />
  </div>
</template>

总结

组件分类=》1.页面组件 2. 页面下功能（.vue格式）
组件化开发是什么 =》一个页面由多个.vue文件组成，完成一个完整的页面效果
组件创建和复用 =》1. 全局（main.js） 2. 局部
掌握组件通信的主要方式
a. 父传子 =》父组件：提供数据 =》:传递数据名字=“变量” | 子组件：接收props:[‘传递数据名字’]
b. 子传父（单向数据流）=》父组件：提供自定义事件=》@语义化事件名=“callback” | 子组件：通知父组件修改 this.$emit(‘语义化事件名’, data,data2)