Vue注释3(组件)

十.组件

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> <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> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>

　　

12.作用域solt

子组件:

<div> <slot text='hello from child'></slot> </div>

　　

父组件:

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

　　

最终结果:

<div> <div> <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>{{ 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> ' })