1.引用方式
我们使用Vue进行普通页面开发却不使用webpack等技术时，定义组件可以只依赖单js文件进行开发
然后像正常引用js文件那样进行引用
???<script src="../Content/plugins/selectIcon/selectIcon.js"></script>
2.组件定义
组件的html内容我们可以使用script模板、字符串、ajax请求获取等方式进行加载，这里为了保持组件引用简单，我们对一段html进行压缩成一行定义为变量。
var html = ‘<modal ?v-model="isshow" title="选择图标" @on-ok="ok" @on-cancel="cancel"><i-form style="height:300px;overflow-y:scroll"></i-form></modal>‘;// 注册Vue.component(‘icon-component‘, { ???props: [‘isshow‘], ???template: html, ???mounted: function () { ???????var _this = this; ???????_this.$nextTick(function () { ???????????$(".icons-item").on("click", function () { ???????????????$(".icons-item").removeClass("icons-itemact"); ???????????????$(this).addClass("icons-itemact"); ???????????????//添加标记 ???????????????$("p[data-v-4ed37512]").removeAttr("data-flag"); ???????????????$("p", $(this)).attr("data-flag", true); ???????????}); ???????????$(".icons-item").on("dblclick", function () { ???????????????var icon = $("p", $(this)).text().trim(); ???????????????$("#txtSelectIcon").val(icon); ???????????????_this.$emit(‘myevent‘, ‘0‘); ???????????}); ???????}); ???}, ???methods: { ???????ok: function () { ???????????var icon = $("p[data-flag]").text().trim(); ???????????$("#txtSelectIcon").val(icon); ???????????this.$emit(‘myevent‘, ‘0‘); ???????}, ???????cancel: function () { this.$emit(‘myevent‘, ‘0‘); } ???}})3.父页面使用
???<div id="SelectICONModal"> ???????<keep-alive> ???????????<icon-component v-bind:isshow="isShow" @myevent="CloseIcon"></icon-component> ???????</keep-alive> ???</div>
var iconVueObj = new Vue({ ???el: "#SelectICONModal", ???data: { ???????isShow: false ???}, ???methods: { ???????CloseIcon() { ???????????this.isShow = false; ???????} ???}});4.页面传值
我们页面传值使用两种方式进行传递
父页面像子页面传值使用props进行传递
<!--父页面-->
<icon-component v-bind:isshow="isShow" ...
//组件定义
Vue.component(‘icon-component‘, { ???props: [‘isshow‘],...
子页面像父页面传值使用$emit触发定义的事件
<!--父页面-->
<icon-component v-bind:isshow="isShow" @myevent="CloseIcon"></icon-component>
//父页面初始化组件时，定义方法
methods: { ???????CloseIcon() { ???????????this.isShow = false; ???????} ???}
//组件触发
this.$emit(‘myevent‘, ‘0‘);
使用Vuejs编写单js组件
原文地址：https://www.cnblogs.com/xcong/p/8150970.html