主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下

组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。 1.父组件向子组件传值 组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。 子组件： 子组件需要从父组件获取 logo 的值，就需要使用 props: [‘logo’] 父组件： 2.子组件向父组件传值 子组件主要通过事件传递数据给父组件。

本文实例讲述了VUE 自定义组件模板的方法。分享给大家供大家参考，具体如下： 先说下需求吧，因为客户的用户群比较大，如果需求变动，频繁更新版本就需要重新开发和重新发布，影响用户的体验，考虑到这一层就想到，页面展示效果做动态可配，需求更新时，重新配置一份模板录入到数据库，然后根据用户选择的模板进行展示。 关于页面展示做的动态可配，我是参考vue的Component组件方式，开始时可能会遇到组件定义后不能加载的情况，并在控制台如下错误：You are using the runtime-only b

一、前言 之前的博客聊过 vue2.0和react的技术选型；聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的，但是鉴于移动设备的复杂性，兼容性问题突出。像 Mint-UI 等说实话很不错了，但是坑也是不少，而且很多功能也是仅凭这些实现不了，这需要我们去封装自己的可复用组件 二、封装组件的步骤 1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。 os：思考1小时，码码10分钟，程序猿的准则。 2. 准备组件的好数据

以下方法只适用于 Vue1.0 版本，推荐系数由高到低排列。 通常我们会在组件里的 template 属性定义模板，或者是在 *.vue 文件里的 template 标签里写模板。但是有时候会需要动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。 例如要做一个类 select 的组件，用户传入 options 数据，通过 value prop 获取选中值，最基本的原型如下。 Vue.component('XSelect', { template: ` <div