vue的组件的初步应用于理解

raymon
183 阅读2分钟

组件_概念

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

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

image.png

组件_基础使用

口诀: 哪部分标签复用, 就把哪部分封装到组件内

==(重要): 组件内template只能有一个根标签==

==(重要): 组件内data必须是一个函数, 独立作用域==

准备-组件文件

  1. 创建组件 components/Pannel.vue
  2. 注册组件: 创建后需要注册后再使用

全局注册

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

语法:


import Vue from 'vue'
import 组件对象 from 'vue文件路径'
​
Vue.component("组件名", 组件对象)

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

单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用==组件里封装的标签替换到这个位置==


<PannelG></PannelG>
<PannelG/>
<pannel-g></pannel-g>

局部注册

语法:


import 组件对象 from 'vue文件路径'
​
export default {
    components: {
        "组件名": 组件对象
    }
}

任意vue文件中中引入, 注册, 使用 组件使用总结:

  1. (创建)封装html+css+vue到独立的.vue文件中

  2. (引入注册)组件文件 => 得到组件配置对象

  3. (使用)当前页面当做标签使用 组件使用总结:

  4. (创建)封装html+css+vue到独立的.vue文件中

  5. (引入注册)组件文件 => 得到组件配置对象

  6. (使用)当前页面当做标签使用

组件-scoped作用

需求: div标签名选择器, 设置背景色

问题: 发现组件里的div和外面的div都生效了

解决: 给Pannel.vue组件里style标签上加scoped属性即可


<style scoped>

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性

而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

image.png

总结: style上加scoped, 组件内的样式只在当前vue组件生效

组件通信-父向子-props

需求: 封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示

image.png 步骤:

  1. 创建组件components/MyProduct.vue - 复制下面标签
  2. 组件内在props定义变量, 用于接收外部传入的值
  3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

components/MyProduct.vue - 准备标签


<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>
​
<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>
​
<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

App.vue中使用并传入数据


<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>
​
<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>
​
<style>
​
</style>

总结: 组件封装复用的标签和样式, 而具体数据要靠外面传入

组件通信-父向子-配合循环

每次循环, 变量和组件, 都是独立的

组件通信_单向数据流

image.png 总结: props的值不能重新赋值, 对象引用关系属性值改变, 互相影响

image.png 总结: 所以props变量本身是不能重新赋值的

组件通信-子向父

  1. 什么时候使用子传父技术?

    1. 当子想要去改变父里的数据

  2. 子传父如何实现?

    1. 父组件内, 给组件@自定义事件="父methods函数"
    2. 子组件内, 恰当时机this.$emit('自定义事件名', 值)
avatar
文章
阅读
粉丝