Vue-組件模板抽離的寫法

時間 2019-11-07

標籤 vue 組件模板寫法简体版

原文原文鏈接

VUE的模板分離寫法。

一、第一種（不經常使用）

    <script type="text/x-template" id="myCpm">
        <div>
            <h2>模板分離的寫法</h2>
        </div>
    </script>

二、第二種

    <template id="myCpm2">
        <div>
            <h2>模板分離的寫法</h2>
        </div>
    </template>

完整代碼*

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <cpn></cpn>
    <cpn2></cpn2>
</div>

<body>
    <!-- 第一種 -->
    <script type="text/x-template" id="myCpm">
        <div>
            <h2>模板分離的寫法</h2>
        </div>
    </script>
    <!-- 第二種 -->
    <template id="myCpm2">
        <div>
            <h2>模板分離的寫法</h2>
        </div>
    </template>

    <script>
        Vue.component('cpn', { template: '#myCpm' })
        // 第一種註冊全局組件
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            components: {
                'cpn2': { template: '#myCpm2' }
            }
            // 第二種註冊局部組件
        })
    </script>
</body>

</html>