Maison  >  Article  >  interface Web  >  Comment écrire des composants en introduisant le fichier vue.js séparément

Comment écrire des composants en introduisant le fichier vue.js séparément

藏色散人
藏色散人original
2021-01-04 09:37:323311parcourir

La méthode d'introduction séparée du fichier vue.js pour écrire un composant : introduisez d'abord le fichier vue.js ; puis utilisez la méthode "Vue.component" pour créer un composant de carte et enfin créez la page parent ; appeler le composant.

Comment écrire des composants en introduisant le fichier vue.js séparément

L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.5.17, ordinateur Dell G3.

Recommandations associées : "Tutoriel vue.js"

Comment écrire des composants en introduisant le fichier vue.js seul ?

1. Introduisez d'abord le fichier vue.js

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>

2. Utilisez ensuite la méthode Vue.component pour créer un composant de carte

Vue.component("card",{
    props:{//这里是组件可以接受的参数,也就是相当于面向
           // 原型写组件时的配置参数,用户可以传递不同参数,自己定义组件
        cardTitle:{//卡片标题
            type:String,
            default:&#39;这是一个卡片&#39;
        },
        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(&#39;cancel&#39;)
        }
    }
});

Utilisez :

Page parent Pour appeler ce composant, la couche la plus externe doit être enveloppée par un élément div avec l'ID d'instance de vue as app.

<div id="app">
    <div>
        <card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
    </div>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn