创建组件
在文件夹下(如components里)创建vue文件，写入代码模板如下
<template>
//这里写组件的模板
</template>
<script>
export default{
//这里声明组件的默认输出
}
</script>
<style scoped>
//这里写组件的样式
</style>
//之前学的所有的插值表达式绑定属性，绑定事件，循环列表等方法在template里面都可以使用
组件的模板，跟元素必须只有一个
组件里的data必须是函数
data(){
return {
testData:'我是一个测试数据'
}
}
引入组件的方法
1.引入自己书写的vue文件
import firstCom from"./components/FirstCom";//路径前加./表示根目录下
2.在父组件内的components里面声明组件
export default {
name: 'App',
components:{firstCom},
}
3.在父组件的模板内直接使用声明的组件,把组件渲染到页面中
<div id="app">
<firstCom></firstCom>
</div>
自定义组件
自定义全局组件
Vue.component("zhead",{
template:'<div>{{testData}}</div>',
data:function(){
return {
testData:"我是儿子"
}
},
}
自定义局部组件
new Vue({
el:"#app",
data:{},
//自定义局部组件
components:{
localcom:{
template:'<div @click="onClick">{{localData}}</div>',
data(){
return{
localData:"我是爸爸",
}
}
}
})
