Home  >  Article  >  Web Front-end  >  How to write components by introducing vue.js file separately

How to write components by introducing vue.js file separately

藏色散人
藏色散人Original
2021-01-04 09:37:323354browse

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.

How to write components by introducing vue.js file separately

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:&#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;)
        }
    }
});

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn