Home > Article > Web Front-end > How to write components by introducing vue.js file separately
How to introduce the vue.js file separately to write components: first introduce the vue.js file; then use the "Vue.component" method to create a card component; and finally make the parent page call the component.
The operating environment of this tutorial: windows7 system, vue2.5.17 version, Dell G3 computer.
Related recommendations: "vue.js Tutorial"
How to write components by introducing vue.js files separately?
1. First introduce the vue.js file
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
2, and then use the Vue.component method to create a card component
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') } } });
Use:
Parent page To call this component, the outermost layer must be wrapped by a div element with the instance ID of vue as app.
<div id="app"> <div> <card :list="list" @ok="okMethods" @cancel="cancelMethods"></card> </div> </div>
The above is the detailed content of How to write components by introducing vue.js file separately. For more information, please follow other related articles on the PHP Chinese website!