Vue开发笔记（李立超教学视频）-组件-MyButton

1.组件

组件就是一个普通的js对象。
定义：const App = {
方法(){
}
属性:
template:
}
创建应用：const app = createApp(App)
挂载到网页：app.mount(“#id”)

2.根组件和子组件

1）子组件： 以按钮为例

export default{
    data(){
        return {
            count:0
        }
    },
    template:`
    <div>
	    <h2>子组件</h2>
	    <button @click='count++'>点我加一</button>
	    <span>{{count}}</span>
    </div>`
} 

2）根组件：

// 导入子组件

import MyButton from {./MyButton.js}
const App{
	方法(){},
	// components: 用于加载子组件，且每个子组件相对独立
	components:{
			// 第一个MyButton是子组件在跟组件的定义名，第二个是子组件名
			MyButton:MyButton // 相同的话可以直接适用一个MyButton
	}

// 根组件中的属性
	template:`\<h1> 子组件\</h1>
	\<MyButton>按钮1\</MyButton>
	\<MyButton>按钮2</MyButton>
	\<MyButton>按钮3\</MyButton>
	`
}

运行结果：

注意： 若自定义标签在html中适用，组件名称需要小写，因为浏览器中的解析不区分大小写