单独引入vue.js文件怎么写组件-Vue.js

单独引入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文件怎么写组件的知识。速戳>>知识兔学习精品课！