首页 > 其他分享 >万象更新 Html5 - vue.js: vue 组件 2

万象更新 Html5 - vue.js: vue 组件 2

时间:2024-09-24 11:14:34浏览次数:7  
标签:vue 万象更新 webabcd Html5 template 组件

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 组件 2

示例如下:

vue\component\sample2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件 2</title>
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="root">

    <button v-for="tab in tabs" @click="currentTab = tab">
        {{ tab }}
    </button>

    <!--
        component - 通过 is 指定当前组件,可以实现动态组件的效果(可以动态的加载你需要的组件)
        keep-alive - 在 component 外包一层 keep-alive 则会在组件的切换中保存各个组件的状态(默认是不保存的)
    -->
    <keep-alive>
        <component :is="currentTab"></component>
    </keep-alive>

    <table>
        <webabcd-tr></webabcd-tr>
    </table>
    <!--
        因为 webabcd-tr 不是 table 内的合法标签,所以上面那样写的结果是不符合预期的
        需要像下面这样写才可以(tr 是 table 内的合法标签),通过 is="vue:xxx" 来实现(其他的像 select/option, ul/li 之类的也是类似这么写)
    -->
    <table>
        <tr is="vue:webabcd-tr"></tr>
    </table>

</div>

<script>

    const app = Vue.createApp({
        data() {
            return {
                currentTab: 'tab1',
                tabs: ['tab1', 'tab2', 'tab3']
            }
        },
        // 注册局部组件,多个同级的局部组件不可以互相使用
        components: {
            'tab1': {
                template: `<input value="我是 tab 1 的内容">`
            },
            'tab2': {
                template: `<input value="我是 tab 2 的内容">`
            },
            'tab3': {
                template: `<input value="我是 tab 3 的内容">`
            },
        }
    });

    // 注册全局组件,多个全局组件可以互相使用
    app.component('webabcd-tr', {
        data() {
            return {
                myArray: ['item1', 'item2', 'item3']
            }
        },
        template: `
            <tr v-for="item in myArray">
                <td>{{ item }}</td>
            </tr>`
    });

    app.mount('#root')


</script>
</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:vue,万象更新,webabcd,Html5,template,组件
From: https://www.cnblogs.com/webabcd/p/18428769/html5_vue_component_sample2

相关文章