十.组件
1.组件中的data为函数
2.props: 父组件向子组件传递数据
子组件:
Child.vue { { myMsg }}
父组件:
3.字面量语法和动态语法:
如果你想要传递的是一个数字,你应该这么做
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 可以是下面原生构造器：
StringNumberBooleanFunctionObjectArraySymbol
5.非 prop 特性
所谓非 prop 特性，就是它可以直接传入组件，而不需要定义相应的 prop。如class,style等6.子组件跟父组件的通信:
父组件使用 $on(eventName) 监听事件子组件使用 $emit(eventName) 来触发事件示例:
子组件:
父组件:
{ { data }}
7.绑定原生事件:
ps:这将触发my-component组件的click事件
8.修饰符 .sync
.sync双向绑定,从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。示例:
子组件:
父组件:
{ { data }}
9.自定义表单事件:
相当于:
10.slot
子组件使用父组件传递过来的内容:
子组件:
我是子组件的标题
只有在没有要分发的内容时才会显示。
父组件:
我是父组件的标题
这是一些初始内容
这是更多的初始内容
最终渲染:
我是父组件的标题
我是子组件的标题
这是一些初始内容
这是更多的初始内容
11.命名solt
子组件:
父组件:
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
这里有一些联系信息
最终渲染:
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
12.作用域solt
子组件:
父组件:
hello from parent { { props.text }}
最终结果:
hello from parent hello from child
13.作用域solt列表组件
子组件:
父组件:
{ { props.text }}
14.动态组件:
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } }})
也可以直接绑定到对象上:
var Home = { template: 'Welcome home!
'}var vm = new Vue({ el: '#example', data: { currentView: Home }})
15.keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
16.子组件索引ref
使用:
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: ' I am async! ' }) }, 1000)})
工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。
18.命名约定
当注册组件 (或者 props) 时，可以使用 kebab-case，camelCase，或 PascalCase;在html中应当使用kebab-case19.内联模板
如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活。
These are compiled as the component's own template.
Not parent's transclusion content.
20.对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', { template: '\ \ Terms of Service
\ ... a lot of static content ...\ \ '})