单独引入vue.js文件写组件的方法：首先引入vue.js文件；然后使用“vue.component”方法创建一个card组件；最后使父页面调用该组件即可。
本教程操作环境：windows7系统、vue2.5.17版本，dell g3电脑。
相关推荐：《vue.js教程》
单独引入vue.js文件如何写组件？
1、首先引入vue.js文件
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
2、然后使用vue.component方法创建一个card组件
vue.component("card",{ props:{//这里是组件可以接受的参数，也就是相当于面向 // 原型写组件时的配置参数，用户可以传递不同参数，自己定义组件 cardtitle:{//卡片标题 type:string, default:'这是一个卡片' }, list:{//列表内容 type:array, default:[] } }, template:` <div class="modal"> <div class="modal-header"> <h4>{{cardtitle}}</h4> </div> <div class="modal-content"> <div> <slot name="modal-content">可以扩展的卡片内容</slot> <ul> <li v-for="(item,index) in list">{{item}}</li> </ul> </div> </div> </div> `, methods:{//这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事 // 件告诉父组件触发一个自定义事件，$emit()方法第二个参数也可以用来传递数据 okhandle(){ this.$emit("ok"); }, cancelhandle(){ this.$emit('cancel') } }});
使用：
父页面调用这个组件，最外层必须是vue的实例id为app的div元素包裹才行。
<div id="app"> <div> <card :list="list" @ok="okmethods" @cancel="cancelmethods"></card> </div></div>
以上就是单独引入vue.js文件怎么写组件的详细内容。