【Vue】Vue基础自用笔记&Day04_①Vue组件②Vue插槽

已于 2022-09-26 21:02:48 修改
阅读量456 收藏 1
点赞数 1
分类专栏： Web前端框架/插件 文章标签： vue.js javascript 前端
于 2022-09-22 20:27:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53130738/article/details/126997587
版权

Vue基础 - Day04

1. Vue组件 - component

什么是组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

一个优秀的组件 / 模块应该做到：高内聚，低耦合

耦合性：每个模块之间相互联系的紧密程度，模块之间联系越紧密，则耦合性越高，模块的独立性就越差

内聚性：一个模块中各个元素之间的联系的紧密程度，如果各个元素（语句、程序段）之间的联系程度越高，则内聚性越高，即‘高内聚’

高内聚是说模块内部要高度聚合，低耦合是说模块与模块之间的耦合度要尽量低。 前者说的是模块内部的关系，后者说的是模块与模块之间的关系。 看似不同，实又相关。

如一个项目中有15个模块，需要在另一个项目中调用其中的一个模块，但是必须把全部的15个模块都移植过去才能使用，这就是高耦合，只移入所需的一个模块就可以使用，就是低耦合。

然后在一个模块中，各个元素（语句、程序段等）之间的联系程度越高，则内聚性越高，即高内聚。

定义全局组件

1.使用 Vue.extend 配合 Vue.component 方法

var login = Vue.extend({
    template: '<h1>登录</h1>'
});
//第一个为组件名称，第二个为绑定的组件的名称
Vue.component('login', login);

2.直接使用 Vue.component 方法

Vue.component('register', {
  template: '<h1>注册</h1>'
});

3.将模板字符串，定义到script标签中，同时，需要使用 Vue.component 来定义组件

<script id="tmpl" type="x-template">
  <div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>

<script>
	Vue.component('account', {
	  template: '#tmpl'
	});
</script>

4.将模板字符串，定义到template标签中

< template id="tmpl">
  <div><a href="#">登录</a> | <a href="#">注册</a></div>
</ template >

同时，需要使用 Vue.component 来定义组件

Vue.component('account', {
  template: '#tmpl'
});

一般只用第四种方式定义全局组件。

注意：
1.组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹，
  即最外层不能有同级的HTML标签，一般用一个 div 将其他的DOM元素包裹起来。
  
2.命名不能和 H5 中已有的标签重名，且驼峰命名不好使，因为HTML大小写不敏感，
  可以用-连接

定义私有组件

在Vue实例中添加 components 属性即可：

const vm = new Vue({
  el: '#app',
  data: {
    flag: true
  },
  methods: {
  },
  components: {
    "register": {
      template: "#register"
    },
    "test": {
      template: "#login"
    },
    // 必须写ID，不可以写类名
    // "lll": {
    //   template: ".lllllll"
    // }
  }
})

引用组件：

 <div id='app'>
   <register v-if="flag"></register>
   <test v-if="flag"></test>
 </div>

组件中数据和方法的调用

组件中也有data属性、methods属性、八个生命周期钩子函数等，但是data属性的属性值
由Vue实例中的对象变为了函数，并且函数中必须要有一个返回值，返回值里是组件可调用
的数据，如：

Vue.component("hello", {
  template: "#hello",
  data() {
    return {
      msg: "Hello World",
      nums: 666
    }
  },
  methods: {
    add() {
      this.nums += 6
    }
  }
})

其目的是为了组件复用时的数据隔离， 否则不同的组件都共用一个数据的话，一个发生变化每一个都会发生变化，一般情况下这不是我们想要的效果。

案例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>

<body>
  <div id='app'>
    <button @click="flag=!flag">销毁Hello</button>
    <hello v-if="flag"></hello>
  </div>
  <template id="hello">
    <div>{{msg}}
      <button @click="add">增6👉</button>
      <span>{{nums}}</span>
    </div>
  </template>
</body>
<script>
  Vue.component("hello", {
    template: "#hello",
    // 组件之间数据隔离
    data() {
      return {
        msg: "Hello World",
        nums: 666
      }
    },
    methods: {
      add() {
        this.nums += 6
      }
    },
    beforeCreate() {
      console.log("创造哈喽前");
    },
    created() {
      console.log("创造哈喽后，可以调用数据了");
    },
    beforeDestroy() {
      console.log("销毁哈喽前");
    },
    destroyed() {
      console.log("销毁哈喽后");
    }
  })
  const vm = new Vue({
    el: '#app',
    data: {
      flag: true
    },
    methods: {
    },
  })
</script>

</html>

使用 <component> 标签来引用组件，并通过is属性来指定要加载的组件，is属性也可进行数据绑定

//指定引用的组件为'hello'
<component is="hello"></component>

//加上冒号后，引号里的内容就变成了变量引用，需要注意单/双引号的添加
<component :is="flag?'hello':'nohello'"></component>

组件动画

<transition> 标签中有一个 mode 属性，来设置组件的动画是先出后入还是先入后出，先出后入为 mode="out-in" ，先入后出为 mode="in-out"，通常先出后入的情况比较符合审美。

---------------------------------------
<p>先出后入的动画：</p>
<transition mode="out-in">
  <component :is="flag?'hello':'nohello'"></component>
</transition>
---------------------------------------
<p>先入后出的动画：</p>
<transition mode="in-out">
  <component :is="flag?'hello':'nohello'"></component>
</transition>

完整案例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<style>
  .v-enter,
  .v-leave-to {
    transform: translateX(200px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s;
  }

  .v-enter-to,
  .v-leave {
    transform: translateX(0px);
  }
</style>

<body>
  <div id='app'>
    <button @click="flag=!flag">销毁Hello</button>
    <hello v-if="flag"></hello>
    <nohello v-else></nohello>
    -------------------------------------
    <component is="hello"></component>
    ---------------------------------------
    <!-- 注意是变量还是字符串 -->
    <component :is="flag?'hello':'nohello'"></component>
    ---------------------------------------
    <p>先出后入的动画：</p>
    <transition mode="out-in">
      <component :is="flag?'hello':'nohello'"></component>
    </transition>
    ---------------------------------------
    <p>先入后出的动画：</p>
    <transition mode="in-out">
      <component :is="flag?'hello':'nohello'"></component>
    </transition>
  </div>
  <template id="hello">
    <div>{{msg}}
      <button @click="add">增6👉</button>
      <span>{{nums}}</span>
    </div>
  </template>
  <template id="nohello">
    <div>
      ByeByeWorld
    </div>
  </template>
</body>
<script>
  Vue.component("hello", {
    template: "#hello",
    // 组件之间数据隔离
    data() {
      return {
        msg: "Hello World",
        nums: 666
      }
    },
    methods: {
      add() {
        this.nums += 6
      }
    },
  })
  Vue.component("nohello", {
    template: "#nohello"
  })
  const vm = new Vue({
    el: '#app',
    data: {
      flag: true
    },
    methods: {
    },
  })
</script>

</html>

也可以选择不使用 <component> 标签，而是直接使用组件加 v-if、v-else，如：

<p>先出后入的动画：</p>
 <transition mode="out-in">
   <hello v-if="flag"></hello>
   <nohello v-else></nohello>
 </transition>

父组件传值子组件

1.子组件中设置 props属性（和data同级），在props属性中设置接收数据的名称与类型，
可以使用数组设置多个接收类型，也可以使用 default函数 设置默认值；

Vue.component("course", {
  template: "#course",
  props: {
    type: String,
    'page-num': [Number, String],
    'page-size': [Number, String],
     test: {
        type: String,
        default: function () {
			return '这是一个默认的名字'
        }
      },
  },
  data() {
    return {
      courseList: [],
      baseUrl: "http://1.117.81.216:8086",
    }
  },
})

2.设置完成后在子组件标签中绑定props中定义的参数，属性值可以是父组件中的数据或者其他字符串，但是在标签中绑定参数时不能使用驼峰命名法，必须用kebaba-case命名法（即以-连接）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>

<body>
  <div id='app'>
  <!-- 子组件标签中绑定props中定义的参数，属性值可以是父组件的数据 -->
    <test :msgson="msgFather"></test>
  </div>
  <template id="test">
    <div>
      <p>{{msg}}------{{msgson}}</p>
    </div>
  </template>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msgFather:"我是父组件的文字信息"
    },
    methods: {
    },
    components:{
      "test":{
        template:"#test",
        data(){
          return{
            msg:"我是子组件的文字信息",
          }
        },
        props:{
          msgson:String
        }
      }
    }
  })
  </script>
</html>

子组件传值父组件

子组件传值父组件需要我们在子组件标签中自定义传值事件，如：

<son @son-to-father="theFather" ref="myson"></son>

son-to-father 是在子组件的 methods 里写的方法，在方法中调用 this.$emit() 函数向父组件传值。

自定义事件不会自己调用，需要我们根据需求设置在什么情况下触发此事件去给父组件传值。

this.$emit() 的第一个参数是我们自己自定义的事件的名称，第二个参数是子组件给父组件传递的内容，可以是子组件 data 中的数据、一段字符串等等。

即：this.$emit(‘事件名称’,传递的数据)

theFather 是在父组件的 methods 里写的方法，触发sonToFather自定义事件后，会自动接收到子组件传递过来的数据，第一个参数就是接收到的数据，接收到后进行自己需要的操作即可。

代码举例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id='app'>
    <p>{{fatherMsg}}</p>
    <button @click="changeMyson">改变子组件文字</button>
    <son @son-to-father="theFather" ref="myson"></son>
  </div>
  <template id="son">
    <div>
      <p>{{msg}}</p>
      <button @click="sonToFather">向父组件传送</button>
    </div>
  </template>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      fatherMsg: "默认的父组件文字"
    },
    methods: {
      theFather(data) {
        console.log(data);
        this.fatherMsg = data
      },
      changeMyson() {
        this.$refs.myson.msg = "改成父组件中的文字"
      }
    },
    components: {
      "son": {
        template: "#son",
        data() {
          return {
            msg: "这里是子组件中的文字",
          }
        },
        methods: {
          sonToFather() {
            this.$emit("son-to-father", this.msg)
          }
        }
      }
    }
  })
</script>

</html>

2. Vue插槽 - slot

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

插槽有 具名插槽 和 默认插槽 。

具名插槽就是给插槽取个名字，一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

默认插槽就是没有名字，只有一个<slot></slot>标签。

<!-- 课程组件 -->
<course page-size='10'>
  <!-- <slot>默认插槽</slot> -->
  <template v-slot:free>免费</template>
  <!-- <template v-slot:disc>限时折扣</template> -->
</course>

<course type="boutique">
  <template v-slot:free>精品</template>
</course>

<course type="discount">
  <template v-slot:discount>限时折扣</template>
</course>

<template id="course">
  <div>
    <h2>
      <!-- 默认插槽：<slot></slot> -->
      <!-- 具名插槽：<slot name="free"></slot>课程 -->
      <slot name="free"></slot>
      <slot name="discount"></slot>课程
    </h2>
    <!-- <slot></slot> -->
    <!-- <slot name="disc"></slot> -->
  </div>
</template>

如果出现具名插槽没有效果，但是也没有报错，极有可能是Vue版本引入的问题！

山清水秀林
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
【Vue框架基础（上）】 ------ 前端面试必备 --- 复习专用
qq_45359288的博客
06-07 570
Vue是一套构建用户界面的渐进式自底而上增量开发的MVVM框架，核心是关注UI视图层、解决数据的绑定问题，为了开发大型单页面应用和组件化
高内聚，低耦合是什么意思？
rqrrqwr的博客
09-20 1181
高内聚，低耦合是什么意思？ 相信很多小伙伴经常在学习的过程中听到“高内聚，低耦合”这么一句话，有的人可能听得一头雾水，以前是大概懂那么个意思，没有仔细去发掘，有点模棱两可的感觉。今天查阅了一些资料，觉得对这句话有了更深层次的理解。 高内聚 概念：一个模块内联系紧密，关联性强。 对象：一个模块内的代码 优点：分而治之，方便处理 低耦合 概念：不同模块之间联系很少或者没有，关联性不强。 对象：不同模块之间 优点 ：不会因为一个模块的改动而影响其他模块也需要跟着改动 例如 高内聚：一个篮球运动员每天做的事情就是相
Vue组件以及插槽
llj1028的博客
12-29 319
Vue组件化 Vue组件化数据请求 Vue插槽的使用 方法事件对象
耦合和解耦的理解 vue高耦合和低耦合的理解
weixin_42097439的博客
03-20 2644
耦合和解耦的理解 vue高耦合和低耦合的理解耦合解耦低耦合高耦合 耦合 耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。 在软件工程中，对象之间的耦合度就是对象之间的依赖性。对象之间的耦合越高，维护成本越高，因 此对象的设计应使类和构件之间的耦合最小。 解耦 解耦，字面意思就是解除耦合关系。 在软件工程中，降低耦合度即可以理解为解耦，模块间有依赖关系必然存在耦合，理论上的绝对零耦合是做不到的，但可以通过一些现有的方法将耦合度降至最低。 低耦合 就
vue 内置组件 component 的用法
xzx66666的博客
08-24 577
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template> <div class="reviewed"> ...
vue-component_day04_04_交互添加.zip
03-13
在"vue-component_day04_04_交互添加.zip"这个资源中，我们可以推测这是关于Vue组件交互性增强的一个教程，特别是针对第四天课程的第四个主题。在这个阶段，你可能将学习如何在Vue应用中添加用户交互功能，如事件...
vue-component_day04_03.zip
07-02
本教程将深入探讨在“vue-component_day04_03”项目中，如何拆分静态组件并实现它们在页面加载时的正确初始化显示。 首先，让我们了解组件的基本概念。在Vue中，组件可以看作是自包含的独立单元，具有自己的视图和...
vue-component_day04_02_静态页面拆分.zip
03-12
"vue-component_day04_02_静态页面拆分.zip"这个压缩包文件显然与Vue组件的拆分有关，特别是针对静态页面的拆分。在这个教程或者项目中，我们将探讨如何将一个大的静态HTML页面拆分为多个独立的Vue组件，以提高代码...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
通过这套Vue基础培训案例笔记素材，你将能够从理论到实践全面了解Vue.js，并具备独立开发Vue项目的技能。无论是对前端开发感兴趣的新手，还是寻求技术进阶的开发者，这都将是一份宝贵的参考资料。
VUE组件封装Tips
weixin_42214717的博客
10-24 1975
在开发项目时我们往往都需要去封装一些组件出来。但如果封装的不好，组件的封装会使得维护起来特别麻烦，适得其反，那让我们看看封装组件时应该注意哪些事项吧。
组件封装原则
织网的博客
01-05 1922
在Vue中封装组件时，遵循低耦合、高内聚和可维护性的原则非常重要。
Vuex数据放在Module实现数据高内聚低耦合
grand_brol的博客
09-14 257
index.js文件 import Vue from 'vue' import Vuex from 'vuex' import customModule from './module/custom' Vue.use(Vuex) export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: { }, mutations: { }, actions: { }, mod
Vue中如何处理组件间的耦合问题？
最新发布
有我更精彩的博客
03-07 1012
在Vue中处理组件间的耦合问题是前端开发中常见的挑战之一。耦合问题指的是组件之间的依赖关系过于紧密，一旦某个组件发生改动，则可能导致其它组件也需要作出相应调整
Vue3+ts+element-plus 组件的二次封装-- 新增修改Form弹框的二次封装，通过JSON进行配置Form表单，实现高内聚低耦合
Penk的博客
11-29 1990
环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？这边虽说是Form弹框，但是还是用到了elementUI的两个组件：1个是el-dialog，1个是el-form。通过JSON进行配置Form表单，实现高内聚低耦合
VUE组件---day04
蜗牛的博客
09-22 446
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
低耦合高内聚 - 不要把所有东西都放在 vuex中
weixin_30826095的博客
07-29 494
我就举一个例子。比如，我想看电视，是否需要遥控器？？请认真思考这个问题。 看似电视与“我”已经解耦了。然而，我需要通过遥控器去看电视，我的目的是看电视，但是我却需要依赖遥控器这个中间件。这就变相地将“我”与电视的依赖关系，变成了我与遥控器的依赖关系。虽然“我”与电视解耦了，但是“我”与遥控器却紧密联系在一起。 那么回到最初的问题，我的目的是看电视。我是否一定需要与电视解耦呢？答案是不一定！以此...
面向对象原则：高内聚、低耦合。多聚合、少继承
weixin_34061555的博客
12-22 202
面向对象的基本原则:多聚合，少继承。低耦合，高内聚.【高内聚、低耦合】 内聚：每个模块尽可能独立完成自己的功能，不依赖于模块外部的代码。 耦合：模块与模块之间接口的复杂程度，模块之间联系越复杂耦合度越高，牵一发而动全身。 目的：使得模块的“可重用性”、“移植性”大大增强 通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低 模块粒度： 『函数』...
浅谈高内聚低耦合
热门推荐
王永迪的专栏
06-15 1万+
高内聚低耦合，是软件工程中的概念，是判断设计好坏的标准，主要是面向对象的设计，看类的内聚性是否高，耦合度是否低
Vue2.0 基础笔记：MVVM设计模式和组件化思想
 7.vue 的 ajax请求vue-resource 是 Vue.js 官方提供的用于处理 Web 请求和处理响应的插件，它提供了一系列的组件用来处理 Web 请求和响应。 可以使用 vue-resource 发送 get、post 请求 Vue.http.get('/api/user...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值