vue入门MVVM架构与插槽介绍

MVVM 架构

学习 Vue 前我们首先还需要了解一个基于前端的架构模式，也就是 MVVM ，它是 Model-View-ViewMode 的简写，其关系简单的描述为下图：

 

• Model（模型层）：表示 Javascript 数据对象

• View（视图层）：表示 DOM，也可以简单理解为前端展示的内容

• ViewModel：连接视图和数据，即用于双向绑定数据与页面

在 MVVM 架构中，视图和数据是没有办法直接进行沟通的，只能通过 ViewModel 来做一个中间关系，ViewModel 可以观察到数据的变化，然后更新视图内容，亦或者监听到视图的变化，并能通知数据发生改变

 插槽定义

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、

组件等，填充的内容会替换子组件的<slot></slot>标签。

 1.在子组件中放一个占位符

2.在父组件中给这个占位符填充内容

  插槽分类与使用

1.具名插槽：

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根

据这个名字把内容填充到对应插槽中。

2.默认插槽：

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

代码使用展示

父组件（设置了两个插槽header和footer）：

<template>
<!--插槽：子组件中预留一个位置，由父组件指定这位置的内容-->
  <Son>
    我是父组件指定的内容
    <template v-slot:header>
      具名插槽内容
    </template>
    <template #footer>
      <!--  语法糖，插槽slot简写#-->
    </template>
  </Son>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: 'App',
  components: {
    Son
  }
}
</script>

子组件：

<template>
    <h3>我是标题，下面是slot插槽</h3>
    <slot></slot>
    <!-- 匿名插槽-->
    <!-- 具名插槽-->
    <slot name="header"></slot>
    <slot name="footer">
        父级不给内容，子级默认展示的内容
    </slot>
    <p>这是son组件末尾</p>
</template>

<script>
    export default {
        name: "Son"
    }
</script>

<style scoped>

</style>