Vue2 day-04

BXY369

已于 2024-09-21 14:20:27 修改

阅读量1.8k

点赞数 41

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2024-09-09 10:00:00 首次发布

本文链接：https://blog.csdn.net/BXY369/article/details/141872144

版权

Vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一. vue组件

1.1 为什么用组件

方案1: 复制代码

代码重复冗余
不利于维护

总结: 代码非常的冗余和重复吧? 解决方案呢? 就是采用我们的组件化开发的方式

1.2 vue组件

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

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

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

1.3 基础使用

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

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

组件内template只能有一个根标签
组件内data必须是一个函数, 独立作用域
命名方式驼峰式命名(大驼峰推荐)-2个单词

步骤:

创建组件/引入组件 components/XxxXxxx.vue
注册组件: 创建后需要注册
使用组件

1.4 全局 - 注册使用

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

语法:

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

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

main.js - 注册

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import PannelG from './components/PannelG'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", PannelG)

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用
单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置

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

1.5 局部 - 注册使用

语法:

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

export default {
    components: {
        "组件名": 组件对象
    }
}

任意vue文件中中引入, 注册, 使用

<template>
  <div id="app">
    <h3>折叠面板</h3>
    <!-- 4. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
    <PannelL></PannelL>
  </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import PannelJ from './components/PannelJ'
export default {
  // 3. 局部 - 注册组件
  /*
    语法: 
    components: {
      "组件名": 组件对象
    }
  */
  components: {
    PannelJ
  }
}
</script>

组件使用总结:

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

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

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

1.4 用less写的样式

下载less和less-loader

npm install less@3 less-loader@5 -D

npm install less@3 -D
npm install less-loader -D

-save: 生产环境

-save-dev/-D: 开发环境

添加lang属性

<style lang="less">

</style>

二. Vue组件之间传值(重点)

2.1 父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。
然后子组件用属性props接收

props:的接受形式:
第一种：
```
props: ['faMsg']
```

第二种

props: {
    faMsg: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

第三种

props: {
    faMsg: {
        type: String,
        default: '默认信息' 
    }
}

注意:

props是只读的,不要直接修改,否则会报错

要想修改props的值，可以把 props 的值转存到data中，因为data中的数据都是可读可写的!

 <div id="app">
    <div>{{pmsg}}</div>
     <!--1、menu-item  在 APP中嵌套着 故 menu-item 为子组件-->
     <!-- 给子组件传入一个静态的值 -->
    <menu-item title='来自父组件的值'></menu-item>
    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
  传的值可以是数字、对象、数组等等
	-->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3、 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

2.2 子组件向父组件传值

子组件用$emit()触发事件

$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on注册子组件的事件

 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父组件用v-on 监听子组件的事件
		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
	-->	
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-携带参数
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
			 1、子组件用$emit()触发事件
			 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
  </script>

2.3 兄弟之间的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心(事件总线)(EventBus) var hub = new Vue()
- 传递数据方，通过hub.$emit(方法名，传递的数据)触发事件
- 接收数据方，在mounted(){} 钩子中通过hub.$on()注册事件
- 销毁事件，通过hub.$off()方法名销毁事件，销毁后无法进行传递数据

<div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    //1、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {      
      },
      methods: {
        handle: function(){
          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>