24 vue之组件的使用+导出导入语法
一、组件的使用
1 每个组件都有三部分
写html内容,原来组件的template
注意:写的html要在div中,不然可能会报错
2 页面组件的使用步骤
-新建一个 xx.vue,默认生成了三部分 -在写html,学的vue的插值,指令,事件。。。 -在
复制粘贴到about.vue,访问出现如下界面
二、导出导入语法
-导出语法
export default {'showName': showName, 'name': name}
-导入:
import Lqz from '../lqz' // Lqz代指的就是导出的对象,以后使用Lqz. 调用即可
-文件夹下如果有index.js 导入的时候,就不需要写 index.js,导到包这一层就可以了
案例:
1 导出
1.1 在src下新建htt文件夹
1.2 在htt文件夹下新建aa.js文件
let name='彭于洋'
function showName(){
console.log(name)
}
export default {'showName':showName,'name':name}
2 导入
About.vue
username:"text" v-model="username">
password:"text" v-model="password">
-文件夹下如果有index.js 导入的时候,就不需要写 index.js,导到包这一层就可以了
import aa from '../htt'
三、在页面中引入其他组件
-编写一个xx.vue ,写好html,css,js
-在要使用的地方,导入,注册
import Header from "../components/Header";
components:{
Header
}
-在templates标签中之间根据名字使用即可
案例: