河北省建设项目信息网站,网站开发职业生涯规划范文,企业网站创建需要多种语言吗,免费建站哪个比较好vue的组件化
vue的组件化#xff0c;就是根据功能、业务逻辑、数据流向等因素进行划分把页面拆分成多个组件。组件是资源独立的#xff0c;组件也可以相互嵌套。目的是提高代码的可读性、可维护性和可复用性。 组件化思想体现
组件封装步骤 1.公共组件
公共组件全局注…vue的组件化
vue的组件化就是根据功能、业务逻辑、数据流向等因素进行划分把页面拆分成多个组件。组件是资源独立的组件也可以相互嵌套。目的是提高代码的可读性、可维护性和可复用性。 组件化思想体现
组件封装步骤 1.公共组件
公共组件全局注册一次注册全局可调用。在src的components文件下创建main.js中全局注册。
步骤
在src的components文件下创建一个TopTitle.vue的文件
templatediv classhellodiv classtop_titleh3{{ msg }}/h3/div/div
/templatescript
export default {props: {msg:{type:String}}
}
/scriptstyle langless.top_title {font-size: 26px;border-bottom: 1px solid #000;padding: 10px 0 0 10px}
/style在main.js下引入并全局注册
// 引入并注册顶部标题组件
import TopTitle from /components/TopTitle;
Vue.component(TopTitle, TopTitle); 在页面中直接使用即可。
templatediv idbodyTopTitle msg人事编制表/.../div
/template2.私有组件
私有组件创建组件并通过components节点注册组件。
templatediv classapp-containerdiv classbox!-- 3. 以标签形式使用注册好的组件 --Left/Left/div/div
/templatescript
// 1. 导入需要使用的 .vue 组件
import Left from /components/Left.vueexport default {// 2. 注册组件components: {Left,}
}
/script
当前需要使用的vue文件同级目录下创建components文件夹代表当前页面的私有组件。
或者统一在src的components文件下创建创建2个文件夹区分公共组件和私有组件。
文件位置统一一下
