vue笔记三(组件)

十.组件

1.组件中的data为函数

2.props: 父组件向子组件传递数据

子组件:
Child.vue

<template>
<span>{{ myMsg }}</span>
</template>

<script>
export default {
  props: ['myMsg'],
  data () {
    return { }
  }
}
</script>

　　

父组件:

<template>
  <div id="app">
    <child :my-msg="msg"></child>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      msg: 'ok'
    }
  }
}
</script>

　　

3.字面量语法和动态语法:

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

　　

如果你想要传递的是一个数字,你应该这么做

<!-- 传递了一个字符串 "1" -->
<comp :some-prop="1"></comp>

　　

4.prop验证:

props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

　　

type 可以是下面原生构造器：

String
Number
Boolean
Function
Object
Array
Symbol

　　

5.非 prop 特性
所谓非 prop 特性，就是它可以直接传入组件，而不需要定义相应的 prop。如class,style等

6.子组件跟父组件的通信:
父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 来触发事件

示例:

子组件:

<template>
<button @click="onClick">单击</button>
</template>

<script>
export default {
  methods: {
    onClick () {
      this.$emit('increment')
    }
  }
}
</script>

　　

父组件:

<template>
  <div id="app">
    <span>{{ data }}</span>
    <child v-on:increment="inCrementTotal"></child>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      data: 0
    }
  },
  methods: {
    inCrementTotal () {
      this.data ++
    }
  }
}
</script>

　　

7.绑定原生事件:

<my-component v-on:click.native="doTheThing"></my-component>

　　

ps:这将触发my-component组件的click事件

8.修饰符 .sync
.sync双向绑定,从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。

示例:

子组件:

<template>
<button @click="onClick">单击</button>
</template>

<script>
export default {
  data () {
    return {foo: 1}
  },
  methods: {
    onClick () {
      this.$emit('update:foo', 10)
    }
  }
}
</script>

　　

父组件:

<template>
  <div id="app">
    <span>{{ data }}</span>
    <child :foo.sync="data"></child>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      data: 0
    }
  }
}
</script>

　　

9.自定义表单事件:

<input v-model="something">

　　

相当于:

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

　　

10.slot

子组件使用父组件传递过来的内容:

子组件:

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

　　

父组件:

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

　　

最终渲染:

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

　　

11.命名solt

子组件:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

　　

父组件:

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

　　

最终渲染:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

　　

12.作用域solt

子组件:

<div class="child">
  <slot text="hello from child"></slot>
</div>

　　

父组件:

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

　　

最终结果:

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

　　

13.作用域solt列表组件

子组件:

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 这里写入备用内容 -->
  </slot>
</ul>

　　

父组件:

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

　　

14.动态组件:
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

　　

也可以直接绑定到对象上:

var Home = {
  template: '<p>Welcome home!</p>'
}
var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

　　

15.keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
  </component>
</keep-alive>

　　

16.子组件索引ref

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

　　

使用:

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

　　

17.异步组件
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单，Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

　　

工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。

18.命名约定
当注册组件 (或者 props) 时，可以使用 kebab-case，camelCase，或 PascalCase;在html中应当使用kebab-case

19.内联模板
如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活。

 

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

　　

20.对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ... a lot of static content ...\
    </div>\
  '
})