全局组件(Vue.component)
组件可以在多个 Vue 实例 中使用
<script>
// 1.创建组件构造器对象
const cop = Vue.extend({
template: `
<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>
`
});
// 2.注册组件
Vue.component('my-cop', cop);
</script>
局部组件
<script>
// 1.创建组件构造器对象
const cop = Vue.extend({
template: `
<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>
`
});
// 2.注册局部组件
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
my-cop: cop
}
});
</script>
父子组件
<script>
// 1.创建组件构造器对象
const cop = Vue.extend({
template: `
<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>
`
});
// 1.创建组件构造器对象
const cop2 = Vue.extend({
template: `
<div>
<h2>
我是标题2
</h2>
<p>
我是内容2
</p>
<p>
我是内容2
</p>
</div>
`,
// 在父组件中注册子组件即可
components: {
cop3: cop
}
});
// 2.注册局部组件
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
// 在根组件中再注册父组件
components: {
my-cop: cop2
}
});
</script>
语法糖注册组件
<script>
// 2.注册全局组件
Vue.component('my-cop', {
template: `
<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>
`
});
// 3.注册局部组件
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
'my-cop': {
template:
`<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>`
}
}
});
</script>
分离写法
<script>
// 2.注册全局组件
Vue.component('my-cop', {
template: '#tmp'
});
// 3.注册局部组件
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: '#tmp'
});
</script>
<template id="tmp">
<div>
<h2>
我是标题
</h2>
<p>
我是内容
</p>
<p>
我是内容
</p>
</div>
</template>
组件中使用数据
<script>
// 2.注册全局组件
Vue.component('my-cop', {
template: '#tmp',
data(){
return {
title: 'abc'
}
}
});
// 3.注册局部组件
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: '#tmp'
});
</script>
父子组件通信
props 等同于 angular 中的 @Input 装饰器,用于接收父组件传递进来的数据,
可以定义参数名,以及参数类型
<script>
// 2.注册全局组件
Vue.component('my-cop', {
template: '#tmp',
props: {
cArr: Array,
cMsg: String,
cMessage: {
type: String,
default: 'test',
required: true
}
}
data(){
return {
title: 'abc'
}
}
});
</script>
子组件通过 .$emit('事件名', 值) 进行发射,父组件通过 @事件名接收,同 angular emit
父子组件数据传递
父组件通过 $ref 来获取子组件中的数据,子组件对象实例中定义 ref=‘xxx’ 即可,
一般不通过 $children 获取,$children 是获取子组件所有数据