vue.jsファイルを別途導入してコンポーネントを記述する方法

vue.js ファイルを個別に導入してコンポーネントを作成する方法: 最初に vue.js ファイルを導入し、次に「Vue.component」メソッドを使用してカード コンポーネントを作成し、最後に親ページで成分。

このチュートリアルの動作環境: 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 メソッドを使用してカード コンポーネント

Vue.component("card",{
    props:{//这里是组件可以接受的参数，也就是相当于面向
           // 原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
        cardTitle:{//卡片标题
            type:String,
            default:'这是一个卡片'
        },
        list:{//列表内容
            type:Array,
            default:[]
        }
    },
    template:`
        <div class="modal">
            <div class="modal-header">
                <h4 id="cardTitle">{{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;)
        }
    }
});

を作成します。使用方法:

親ページ このコンポーネントを呼び出すには、最も外側のレイヤーを vue のインスタンス ID を持つ div 要素で app としてラップする必要があります。

rree

以上がvue.jsファイルを別途導入してコンポーネントを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。