基本组件拆分和嵌套
为了不是项目看起来复杂难懂。所以我们采用组件化开发。所有的组件单独放。在需要使用的地方嵌套即可。
app.vue
<template>
<Header></Header>
<Main></Main>
<Footer></Footer>
</template>
<script>
import Header from '@/01_组件的拆分和嵌套/Header'
import Main from '@/01_组件的拆分和嵌套/Main'
import Footer from '@/01_组件的拆分和嵌套/Footer'
export default {
name: 'App',
components: {
Header,
Main,
Footer
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
app.vue中引入了3个组件。
最终将这三个组件嵌套在一个页面展示。
提示:在引入代码的时候加上后缀名,方便vscode对代码提示;
像这样是没有代码提示的
加上后缀名以后是可以得到提示的
组件嵌套中样式想要保持唯一性,可以在style标签中加入scoped属性;注意 样式避免用标签选择器,应该使用类选择器选择相应的标签。
嵌套组件之间形成了父子组件那么父子组件如何通信呢?
- 父组件传递给子组件:通过props属性
- 子组件传递给父组件:通过$emit触发事件
什么是props?
props是你可以在组件上注册一些自定义的attribute;父组件给这些attribute赋值,子组件通过这些attribute的名称获取到对应的值;
props有两种常见的用法:
一种是字符串数组,数组中的数组就是attribute;
export default {
props:["title","content"]
}
一种是对象类型,对象类型我们可以在指定的attribute名称的同时,指定它需要传递的类型,是否为必传,默认值等;
export default {
props:{
title:String,
content:{
type: String,
required:true,
default(){
return: '123'
}
}
}
}
prop的大小写命名:当你使用dom模板的时候,驼峰命名法的prop名需要使用其等价的kebab-case(短横线分割命名)命名
注意当父组件传值是非prop的时候,例如style,class等,会发生属性继承;如果子组件有多个根可以在子组件上使用v-bind指定要继承的根元素如 :id="$attrs.id"
什么情况下子组件需要传递内容到父组件呢?
- 当子组件有一些事件发生的时候,比如在组件中发生了点击,父组件需要切换内容;
- 子组件有一些内容需要传递给子组件的时候
该如何做?
首先在子组件上定义好在某些情况下触发的事件名称;
其次,在父组件在以v-on的方式传入要监听的事件名称,并且绑定到对应的方法中去;
最后在子组件中发生某个事件的时候,根据事件名称触发对应的事件;
子组件:
父组件: