组件基础
什么是组件
其实突然出来的这个名词,会让您不知所以然,如果大家使用过bootstrap的同学一定会对这个名词不陌生,我们其实在很早的时候就接触这个名词
通常一个应用会以一颗嵌套的组件树的形式来阻止:
局部组件
使用局部组件的打油诗: 建子 挂子 用子
注意:在组件中这个data必须是一个函数,返回一个对象
<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script>
//1.创建子组件
const App = {
//必须是一个函数
data() {
return {
msg: '我是App组件'
}
},
components: {
Vcontent
},
template: `
<div>
<Vheader></Vheader>
<div>
<Vaside />
<Vcontent />
</div>
</div>
`
}
new Vue({
el: '#app',
data: {
},
components: {
// 2.挂载子组件
App
}
})
</script>
全局组件
通过Vue.component(组件名,{})创建全局组件,此时该全局组件可以在任意模板(template)中直接使用
Vue.component('Child',{
template:`
<div>
<h3>我是一个子组件</h3>
</div>
`
})
在项目的实际开发过程中，这两种组件的运用都有它独特之处。局部组件使用最广泛。
组件通信
父传子
如果一个网页有一个博文组件,但是如果你不能向这个组件传递某一篇博文的标题和内容之类想展示的数据的话,它是没有办法使用的.这也正是prop的由来
父组件往子组件通信:通过Prop向子组件传递数据
Vue.component('Child',{
template:`
<div>
<h3>我是一个子组件</h3>
<h4>{{childData}}</h4>
</div>
`,
props:['childData']
})
const App = {
data() {
return {
msg: '我是父组件传进来的值'
}
},
template: `
<div>
<Child :childData = 'msg'></Child>
</div>
`,
computed: {
}
}
- 在子组件中声明props接收在父组件挂载的属性
- 可以在子组件的template中任意使用
- 在父组件绑定自定义的属性
子传父
网页上有一些功能可能要求我们和父组件组件进行沟通
子组件往父组件通信: 监听子组件事件,使用事件抛出一个值
Vue.component('Child', {
template: `
<div>
<h3>我是一个子组件</h3>
<h4>{{childData}}</h4>
<input type="text" @input = 'handleInput'/>
</div>
`,
props: ['childData'],
methods:{
handleInput(e){
const val = e.target.value;
//使用$emit触发子组件的事件
this.$emit('inputHandler',val);
}
},
})
const App = {
data() {
return {
msg: '我是父组件传进来的值',
newVal:''
}
},
methods:{
input(newVal){
// console.log(newVal);
this.newVal = newVal;
}
},
template: `
<div>
<div class='father'>
数据:{{newVal}}
</div>
<!--子组件监听事件-->
<Child :childData = 'msg' @inputHandler = 'input'></Child>
</div>
`,
computed: {
}
}
-
在父组件中 子组件上绑定自定义事件
-
在子组件中 触发原生的事件 在事件函数通过this.$emit触发自定义的事件
平行组件
在开发中,可能会存在没有关系的组件通信,比如有个博客内容显示组件,还有一个表单提交组件,我们现在提交数据到博客内容组件显示,这显示有点费劲.
为了解决这种问题,在vue中我们可以使用bus,创建中央事件总线
const bus = new Vue();
// 中央事件总线 bus
Vue.component('B', {
data() {
return {
count: 0
}
},
template: `
<div>{{count}}</div>
`,
created(){
// $on 绑定事件
bus.$on('add',(n)=>{
this.count+=n;
})
}
})
Vue.component('A', {
data() {
return {
}
},
template: `
<div>
<button @click='handleClick'>加入购物车</button>
</div>
`,
methods:{
handleClick(){
// 触发绑定的函数 // $emit 触发事件
bus.$emit('add',1);
}
}
})
其它组件通信方式
父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深
Vue.component('B', {
data() {
return {
count: 0
}
},
inject:['msg'],
created(){
console.log(this.msg);
},
template: `
<div>
{{msg}}
</div>
`,
})
Vue.component('A', {
data() {
return {
}
},
created(){
// console.log(this.$parent.$parent);
// console.log(this.$children);
console.log(this);
},
template: `
<div>
<B></B>
</div>
`
})
new Vue({
el: '#app',
data: {
},
components: {
// 2.挂载子组件
App
}
})
