Vue学习笔记---暂保存

Vue的学习笔记

一 Vue基本

1. Vue的设计理念

vue要做一个渐进式框架,它给你提供足够的选项，但并不主张很多必须要求,它承担了较难的做减法的部分，而留给用者较简单的做加法的部分。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

关于响应式,我个人理解Vue的响应式开发主要体现在双向绑定方面,所有的数据、样式、属性我们都可以动态的进行变化,

Vue响应式原理

2. Vue的区域性

举个例子

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

当我们创建这样一个Vue实例后,它就挂在到了一个id为app的dom对象上,我们就不再需要和HTML直接交互了,我们仅仅需要利用Vue实例操作即可

3 Vue提供的指令(绑定到元素的属性)

v-on(简写@)监听事件

v-on 指令可以监听DOM 事件 比如click,enter,mouseover,我们在vue中可以通过body里传入&event的方式间接来获取事件信息.按键修饰符

 ```
    <div id="app">
        <input type="text" v-on:keydown="fun($event)"> <br />
    </div>

    new Vue({
        el:"#app",
        methods:{
            fun:function(event){
                var keyCode=event.keyCode
                if(keyCode>=48&&keyCode<=57||keyCode>=97&&keyCode<=105||keyCode==8){
                    event.getPreventDefault();//键盘有效,允许输入
                }else{
                    event.preventDefault()//键盘无效,不允许输入
                }
            }
        }
    }) 
 ```

v-bind(简写:):给标签的属性赋值

我们传统方式,如用插值表达式{{}}是无法给我们我属性赋值的<font color="{{color1}}">颜色1</font>
所以我们要想在js中动态给标签里的属性赋值,我们需要用到v-bind:
我们可以在属性前面加v-bind: 代表后面的属性值是从我们的vue对象中取得
如下

      <!DOCTYPE html>
      <html xmlns:v-bind="http://www.w3.org/1999/xhtml">
      
      <head>
          <meta charset="utf-8" />
          <title>v-model</title>
          <script src="js/vuejs-2.5.16.js"></script>
      </head>
      
      <body>
      <div id="app">
          <font v-bind:color="color1">颜色1</font>
          <hr>
          <font v-bind:color="color2">颜色2</font>
      </div>
      <hr />
      <div id="app2"><!-- 检测v-bing的简便用法,直接用:代替V-bind: -->
          <font :color="color3">颜色3</font>
          <hr>
          <font :color="color4">颜色4</font>
      </div>
      </body>
      <script>
          //view model
          new Vue({
              el:"#app",
              data:{
                  color1:"red",
                  color2:"blue"
              }
          })
          new Vue({
              el:"#app2",
              data:{
                  color3:"yellow",
                  color4:"red"
              }
          })
      </script>
      
      </html>

效果图

另外V-bind支持对属性支持多次赋值以及三目运算符以及.

  • 对象赋值
  • 数组赋值
绑定类方式：对象语法
用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

绑定类方式:数组语法
数组语法的含义是:class后面跟的是一个数组。
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class="['active', 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="['active', 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

一般不用这个,因为意义不大,和我们直接用class=""差不多
而我们用对象语法时候比较灵活比如:class="{active:true,line:false}",我们可以通过一些如动态判断以及绑定进行比较灵活的配置.
v-bind绑定style

  • 绑定方式一：对象语法
    :style="{color: currentColor, fontSize: fontSize + 'px'}"
    style后面跟的是一个对象类型,对象的key是CSS属性名称,对象的value是具体赋的值,值可以来自于data中的属性
  • 绑定方式二：数组语法
    <div v-bind:style="[baseStyles, overridingStyles]"></div>
    style后面跟的是一个数组类型,多个值以,分割即可

v-text v-html 向元素加载数据

我们用jquery通常向页面写有两种方式

加载时不被解析的     document.getElementById("div1").innerText=""
加载时被解析的       document.getElementById("div1").innerHTML=""

而我们可以在标签内使v-text和v-html当作属性来使用

html进行渲染   <div v-html="mes1" id="div3"></div>
html不进行渲染 <div v-text="mes1" id="div4"></div>
mes1=`<a href='www.baidu.com'>百度一下</a>`

v-if v-show控制是否元素显示

`v-if v-show都是靠后面的值来决定是否显示的

  • v-if 的特点：每次都会重新删除或创建元素
  • v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗

  • v-else v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
v-else-if，顾名思义，充当v-if 的“else-if 块”，可以连续使用：
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if的元素之后。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

注意 : 这里有个问题

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如如下例子中，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

有时候我们不想这样,那么Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需在不想复用的内部元素上添加一个具有唯一值的 key attribute即可

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

如上,我们<label> 元素仍然会被高效地复用，因为它们没有添加 key attribute。

v-model用于实现数据双向绑定以及预设值

我们的差值表达式是无法在标签属性栏中使用的,这也就意味着,我们无法给某些文本框之类的直接预设值.

4. 计算属性

使用模板应该注重其中只是简单的声明式逻辑,我们使用计算属性可以避免我们模板语法中出现复杂函数段,反面例子如下{{message.split('').reverse().join('') }}

正面例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 我们定义的Vue实例vm
      return this.message.split('').reverse().join('')
    }
  }
})

为啥Methods里定义方法也可以实现"同样效果",我们还用计算属性?
原因是计算属性是基于它们的响应式依赖进行缓存的。只要我们依赖的数据没发生变化,那么相同的调用计算属性会直接返回数据,这在我们大量计算中会省掉很多性能开销,比如计算一个大数组的数据的和等等.
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter,这是一个当我们向属性赋值后计算属性get前的中间阶段.

5.监听器

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，监听器是最有用的。对于监听器和计算属性的选择---如果有一些操作是重复的类似的,我们可以定义一个计算属性并在内部做细节判断处理,这样可以避免滥用watch.

6.过滤器

Vue允许自定义过滤器，可被用于常见的文本格式化。比如有时候我们想要对后台传过来的数据做些处理,这就需要过滤器了,过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符号指示： data|filtername
具体使用实例方法如下

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

注意:

  • 1.当全局过滤器和局部过滤器重名时，会采用局部过滤器。
  • 2.过滤器可以串联，{{ message | filterA | filterB }},处理结果以此往后背过滤处理
  • 3.过滤器是 JavaScript 函数，因此可以接收参数：{{ message | filterA('arg1', arg2) }},这里message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
  • 4.关于过滤器的声明位置:
    • 可以在一个组件的选项中定义本地的过滤器：
    • 创建 Vue 实例之前定义全局定义过滤器
    • 以上例子可以参考栗子

过滤器和计算属性功能非常类似,关于他俩的区别如下：

计算属性 过滤器
依赖于一个固定的vue实例 ，在某一个实例中使用 不依赖于实例。可以定义一个全局过滤器，在多个实例中使用
不接受额外参数，依赖于data属性中的变量 不要求是data中的变量，可以是临时变量。可接受额外参数。
有缓存管理机制，可减少页面调用次数 无缓存机制，调用次数，取决于页面中有所多少过滤器
计算属性虽默认为只读，但可以定义为对象，开启可读可写模式 只能读取操作
计算属性被作为一个类属性调用 过滤器被作为一个特殊方法处理

相同点：

都必须有返回值

二 组件

1. Vue组件基础

1.1 组件名

推荐使用 组件名 用-分割(单词全部使用小写,单词间使用短横线-分割)命名的方式,而不是驼峰命名方式
因为html大小写不敏感,在dom操作中使用驼峰命名会报错,另外在自定义事件中，事件名也应该使用短横线分割方法命名，如果将事件用v-on:myEvent 命名，就会变成v-on:myevent. 导致监听不到事件，所以用v-on：my-event 。

1.2组件模板

以前我们使用 Vue.component 来定义全局组件，紧接着用new Vue({ el: '#container '}),但这样有许多缺点,比如每个 component 中的命名不得重复,不支持CSS等
Vue基础模板如下

<template>
html代码
</template>

<script>
vue代码
</script>

<style>
css代码
</style>

关注点分离不等于文件类型分离。Vue认为相比于把代码库分离成三个大的层次 html css js并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

即便你不喜欢单文件组件，仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。如下

<template>
  <div>  dddd </div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
1.3 组件注册
  • 全局注册
    采用Vue.component来创建组件的组件是全局注册的。可以用在任何新创建的Vue 根实例和其子组件中,可以采用new Vue({ el: '#app' })进行声明,如下
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>
  • 局部注册
    全局注册后即使我们不用它仍然会被包含在最终的构建结果中,造成用户下载的 JavaScript 的无谓的增加。
    我们可以使用如下方式进行生命和注册.
var ComponentA = { /* ... */ }

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA(等同于'componentA': ComponentA,这要求其同时是用在模板中的自定义元素的名称也是包含了这个组件选项的变量名)
  },
}
2. Vue父子组件之间的通讯
一 父组件向子组件通过props传递数据

在组件中，使用选项props来声明需要从父级接收到的数据。(props里的东西其实就是一些等待接受父组件传数据的对象)
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

Prop 是你可以在组件上注册的一些自定义 attribute。
当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

1. props值为数组时候

为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问data中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来,在这里我们直接用k-v对显示了值,而没有进行v-bind的动态绑定(下面有介绍)：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

从以上的例子我们可以看出来,如果我们想动态传值或者在传值之前做一定的计算时候可以使用v-bind绑定要传递的数据。每当父组件的数据变化时，该变化也会传导给子组件。

2. props值为对象时候

通常我们希望每个 prop 都有指定的值类型。这时，我们可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}
3. 关于props值为对象时候,我们可以对传入的数据做校验或者说验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

3.1.在props中我们可以传一个值做一个对象元素传入,对其做三个限定.如下如代码中的name
  • type 约定该元素类型
  • default 约定默认值(如果父组件不传入值的话将直接使用默认值)
  • required 约定是否要求必须传入(如果要求了父组件没有传入则会报错)
props: {
    title:String,
       propB: [String, Number],
    name:{
            type:String,
            default:"zyh",
            required:true
            }
        }
3.2 我们可以对传入的值约定多个可能类型

如propB: [String, Number]

3.如果我们要求传入的数据为对象或者数组,那么默认值需要用工厂函数获取
 // 带有默认值的对象
  propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    }

注意:HTML 中的 attribute 名是大小写不敏感的,驼峰命名法的 prop 名,我们在父组件传的时候需要使用其等价的 kebab-case (短横线分隔命名) 命名

二 子传父---通过监听子组件事件传递数据和信号给父组件
关于事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。
举个例子，如果触发一个 camelCase 名字为的事件：this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的：
<my-component v-on:my-event="doSomething"></my-component>
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。

并且v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent将会变成 v-on:myevent——导致 myEvent不可能被监听到。

因此，Vue官方推荐始终使用 kebab-case 的\color{red}{事件名}。

自定义事件的流程：
  • 在子组件中，通过$emit来触发事件。
  • 在父组件中，通过v-on来监听子组件事件。
    一个传递加减信号的demo
自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox>触发一个 change事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

关于子组件向父组件传参数量问题
$emit传递一个参数时
子组件：
this.$emit('closeChange',false);
父组件：
<posilCom @closeChange="closeCom($event)"></posilCom>
closeCom(msg) {
    this.msg = msg;
}

$emit传递多个参数时,父组件接受参数类似于一个数组

子组件：
this.$emit('closeChange',false,true);
父组件:
<posilCom @closeChange="closeCom(arguments)"></posilCom>
closeCom(msg) {
    this.msg1 = msg[0];
    this.msg2 = msg[1];
}
2. Vue父子组件的访问方式

如果我们不需要利用父子组件通信去交换什么数据或者信号,我们仅仅需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件,从而可以相互得到对方组件里的数据和方法,那么不必用之前的prop和自定义事件.

2.1 .Vue提供了一些的方法可以达到父子互相访问的效果.
  • 父组件访问子组件：使用this.$children或$refs
    • this.$children得到是一个子组件数组，它包含所有子组件对象。
  • 子组件访问父组件：使用this.$parent
  • 子组件访问根Vue实例：使用this.$root
2.2 .父组件访问子组件：使用this.$children或this.$refs
  • $children (批量获得子组件)

我们在父组件js中使用$children可以获得所有的子组件,该组件所有的子组件为成为一个数租里的元素,我们可以通过该数组一个个的访问子组件,缺点:无法特指某一个组件,优点:可以一次性获取所有的子组件

我们使用this.$children得到的是所有的子组件组成的数组,我们可以用其获得一些组件内的数据比如this.$children[0].name,是获取第一个子组件定义的name属性的值.
我们也可以用如下for函数来遍历每一个子组件元素,调用子组件的getValue(方法);

for (let  c of this.$children) {
console. log(c. getValue())
}
  • $refs (常用)

如上我们所看,$children有一个缺点,无法特指某一个组件,如果我们想获得某一组件必须用$children[索引号]去特别指定,但是我们开发时候可能随时来需求改组件,那么组件位置或者序号就会变化,那么通过原来的索引号就无法正常取得数据了

因此$refs就显得十分必要,我们可以在子组件引用时在其标签上加上引用名去唯一标识这个子组件,然后即可在父组件中通过this.$refs.引用名.属性名/方法名去获取特定组件的属性值或者调用其方法.如下图通过点击父组件内的button按钮调用子组件的方法.

3.子组件访问父组件 this.$parent

如下图,我们可以通过`$this.parent'获取父组件,可以继续往下调用父组件的属性和方法.


但是我们开发时候一般不建议这样使用,因为我们用组件化开发一般是为了复用,如果我们在组件内定义了调用父组件的方法,但是用在不同位置的组件有不同的父组件,这样就会出现问题了.

4 子附件访问根组件 this.$root

这样获得的是根Vue实例,可以当做使用父组件一样使用,调用方式如下

3 插槽

1 .插槽的作用
  • 让我们封装的组件更加具有扩展性。
  • 让使用者可以决定组件内部的一些内容到底展示什么。
2 插槽的类别:普通插槽,具名插槽,作用域插槽
2.1单个普通插槽

使用作用域插槽其实就是抽取共同点,保留不同点的坑位(插槽),让父组件去扩展定制.

举个栗子
如上图我们的APP里有大量的涉及到一样格式的状态栏,一样格式的tab,其实我们可以将状态栏和tab栏抽成一个组件
代码举个栗子
如果我们在组件引用初写了许多标签,他们也会被全部插到插槽里,如

我们也可以在组件内部<template>模板定义插槽时候写一些默认值,比如<template><solt>暂时无法访问<solt><teplate>>,但是一旦我们在父组件用的时候写了插槽的值,那么默认值将被替换.

2.2 作用域插槽

作用域插槽的作用核心思想:\color{red}{父组件替换插槽的标签，但是内容由子组件来提供。}

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

2.3 .具名插槽----多个插槽的使用

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

其它示例

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如，我们要实现一个 <todo-list> 组件，它是一个列表且包含布局和过滤逻辑：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

现在当我们使用 <todo-list> 组件的时候，我们可以选择为 todo 定义一个不一样的 <template> 作为替代方案，并且可以从子组件获取数据：

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,378评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,356评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,702评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,259评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,263评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,036评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,349评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,979评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,469评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,703评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,257评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2赞 345

推荐阅读更多精彩内容

  • Vue学习笔记
    序言：乱七八糟一锅粥！ 基于Vue.js 教程、介绍— Vue.js 心得： 在vue中，推荐始终使用 kebab...
    苦苦修行阅读 645评论 0赞 1
  • vue学习笔记(下)
    这篇文章是接着我的上部vue学习笔记写的,之所以分开写这两篇文章是因为我意识到不知道什么时候就写了非常多的字了,所...
    看物看雾阅读 824评论 0赞 1
  • vue的学习笔记总结
    1.常用名词 npm:包管理器，用于下载资源包 vue-router:vue推荐的路由框架 vuex: 状态管理器...
    Lucy_b1dc阅读 1,242评论 0赞 0
  • vue学习笔记
    安装 概述 vue模板 vue定义了许多系统自带的属性attribute,一般用$开头来访问，有一些常用的attr...
    0x01阅读 213评论 0赞 0
  • 前端学习笔记Vue入门
    Vue.js入门教程 参考文献 Vue-Cli webpack打包入门：http://www.cnblogs.co...
    采香行处蹙连钱阅读 1,434评论 2赞 3