Vue组件化开发
目录
Vue 组件化
面向组件编程。
把一个页面按照模块拆分成 N 个小块。
注意:演示环境为 Vue 脚手架搭建的项目上进行演示。
创建局部组件
语法格式:
Vue.component('my-component-name',{ // ...options... })
例子:
注册一个组件 组件名为my-component-name
,组件内容为<h3>第一个局部组件</h3>
。
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <!-- 使用局部组件 --> <my-component-name/> </div> </template> <script> // 引入 Vue import Vue from 'vue' // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' // 创建局部组件 Vue.component('my-component-name', { template: '<h3>第一个局部组件</h3>' }) export default { name: 'Home', components: { HelloWorld } } </script>
创建全局组件
新建组件 vue 文件(这里演示为在原有的组件上进行修改)。
组件的基本结构:
<template> <div class="hello"> <h1>第一个全局组件</h1> </div> </template> <script> export default { name: 'HelloWorld', } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
导入该组件:
import HelloWorld from '@/components/HelloWorld.vue'
@表示 src 目录。
注册该组件:
export default { name: 'Home', components: { HelloWorld } }
使用该组件:
进行复用:
直接使用标签即可。
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld/> <HelloWorld/> <HelloWorld/> <!-- 使用局部组件 --> <my-component-name/> </div> </template> <script> // 引入 Vue import Vue from 'vue' // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' // 创建局部组件 Vue.component('my-component-name', { template: '<h3>第一个局部组件</h3>' }) export default { name: 'Home', components: { HelloWorld } } </script>
效果如下:
注意事项:
data 必须是一个函数。
<template> <div class="hello"> <h1>第一个全局组件</h1> <ul> <li>{{ name }}</li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data() { return { 'name': '组件' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
创建组件可以理解为自定义了有一个 html 标签。
拆分组件的目的是为了复用。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue组件化开发
码云笔记 » Vue组件化开发