1. 全局组件
<!-- 定义全局组件 -->
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
<!-- 在 Vue 实例中使用全局组件 -->
<div id="app">
<my-component></my-component>
</div>
// 创建 Vue 实例
var app = new Vue({
el: '#app'
});
在这个例子中，Vue.component 全局注册了一个名为 my-component 的组件，然后在 Vue 实例中使用了这个组件。组件的模板部分通过 template 选项定义。
2. 局部组件
你也可以在 Vue 实例的 components 选项中定义局部组件：
<div id="app">
<my-local-component></my-local-component>
</div>
// 创建 Vue 实例
var app = new Vue({
el: '#app',
components: {
'my-local-component': {
template: '<div>Another custom component!</div>'
}
}
});
在这个例子中，components 选项定义了一个名为 my-local-component 的局部组件，它只能在这个 Vue 实例的范围内使用。
3. 组件之间的数据传递
父组件可以通过属性向子组件传递数据，子组件通过 props 选项接收数据：
<!-- 父组件 -->
<div id="app">
<my-child :message="parentMessage"></my-child>
</div>
// 子组件
Vue.component('my-child', {
props: ['message'],
template: '<div>{{ message }}</div>'
});
// 创建 Vue 实例
var app = new Vue({
el: '#app',
data: {
parentMessage: 'Message from parent component'
}
});
在这个例子中，parentMessage 通过 :message 绑定传递给子组件。
4. 组件的生命周期钩子
Vue 组件有一系列的生命周期钩子函数，例如 created、mounted、updated、destroyed 等，你可以在这些钩子中执行一些逻辑。例如：
Vue.component('my-lifecycle-component', {
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, Vue!'
};
},
created() {
console.log('Component created!');
}
});
在这个例子中，当组件被创建时，created 钩子函数会被调用，输出一条日志。
总的来说，Vue.js 的组件系统使得构建大型、可维护的应用变得更加简单和模块化。组件的复用和封装性让你能够更容易地管理应用的代码结构。
转载请注明出处：http://www.zyzy.cn/article/detail/4804/Vue