标签：ops 位置 this 学习笔记 ext 例子 function text 选项
组件的注册分为全局注册和局部注册
全局注册
1 Vue.component(‘my-component‘, {
2 // 选项
3 })
局部注册
1 var Child = {
2 template: ‘<div>A custom component!</div>‘
3 }
4 new Vue({
5 // ...
6 components: {
7 // <my-component> 将只在父模板可用
8 ‘my-component‘: Child
9 }
10 })
二、使用Props传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
在组件中需要显式的用props选项来声明：
1 Vue.component(‘child‘, {
2 // 声明 props
3 props: [‘message‘],
4 // 就像 data 一样，prop 可以用在模板内
5 // 同样也可以在 vm 实例中像 “this.message” 这样使用
6 template: ‘<span>{{ message }}</span>‘
7 })
在HTML传入普通字符串中：
1 <child message="hello!"></child>
也可以动态地绑定props,使用 v-bind 动态绑定表单值，HTML如下:
1 <div>
2 <input v-model="parentMsg">
3 <br>
4 <child v-bind:my-message="parentMsg"></child>
5 </div>
三、传递数据
使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
下面是一个例子：
//HTML
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//Js
Vue.component(‘button-counter‘, {
template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit(‘increment‘)
}
},
})
new Vue({
el: ‘#counter-event-example‘,
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
四、使用slot分发内容
除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
假定 my-component 组件有下面模板：
<div>
<h2>I‘m the child title</h2>
<slot>
如果没有分发内容则显示我。
</slot>
</div>
父组件模版：
<div>
<h1>I‘m the parent title</h1>
<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component>
</div>
渲染结果：
<div>
<h1>I‘m the parent title</h1>
<div>
<h2>I‘m the child title</h2>
<p>This is some original content</p>
<p>This is some more original content</p>
</div>
</div>
五、可复用组件
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots ：
Props 允许外部环境传递数据给组件
Events 允许组件触发外部环境的副作用
Slots 允许外部环境将额外的内容组合在组件中。
1 <my-component
2 :foo="baz"
3 :bar="qux"
4 @event-a="doThis"
5 @event-b="doThat"
6 >
7 <img slot="icon" src="...">
8 <p slot="main-text">Hello!</p>
9 </my-component>
六、子组件索引
尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID 。例如：
1 <div id="parent">
2 <user-profile ref="profile"></user-profile>
3 </div>
1 var parent = new Vue({ el: ‘#parent‘ })
2 // 访问子组件
3 var child = parent.$refs.profile
标签：ops 位置 this 学习笔记 ext 例子 function text 选项
原文地址：http://www.cnblogs.com/cheukle3/p/6188445.html
