使用组件的三个步骤
如在 App.vue 中使用组件
1.在 App.vue 中使用 import 语法导入需要的组件
import 自定义组件名 form '@/components/组件文件'
因为使用 vue-cli 生成
此时的 @ 代表的是 src 目录
写在该文件的 script 开头即可
2.使用 components 节点注册组件
在该件的 script 中
export default {
components:{
//上文导入的自定义组件名,假设为nav
//'nav':nav
//因为键和值一样可简写为
nav
}
}
3.以标签的形式使用刚才注册的组件
假设上文自定义的标签名为 nav
<div class='box'>
<nav>此处是 nav 组件 <nav>
</div>
每个组件在没有使用之前互相之间是独立的
在使用时才会形成父子及同级的关系
components 注册的为私有组件
如 在组件 A 的 components 节点下注册了组件 F
则组件 F 只能用在组件 A 中
不能被用在组件 C 中
注册全局组件间
在 main.js 通过 Vue.component()方法
假设组件名为 Count
import Count from '@/components/Count.vue'
//参数1: 表示组件的"注册名称"
//参数2: 需要被全局注册的那个组件
Vue.component('MyCount',Count)
组件的 props
格式:
export defalut{
//组件自定义属性
props:['自定义属性A','自定义属性B','其他属性'],
//组件的私有数据
data(){
return{}
}
}