十.组件
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>
'
})