Vue组件定义

最新推荐文章于 2024-09-21 11:34:18 发布

我是全栈架构师

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量111

点赞数

分类专栏： vuejs 文章标签： vue javascript

本文链接：https://blog.csdn.net/mxj588love/article/details/103492022

版权

vuejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件定义</title>
    <!--<script src="vue.js"></script>-->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <!--<user-info-component></user-info-component>-->
    <user-info-component2 title-name="系统一"></user-info-component2>
    <user-info-component2 title-name="系统二"></user-info-component2>
	<!--调用局部组件-->
    <!--<dept-select></dept-select>-->
</div>

<template id="deptTemplate">
    <!--必须要包含一个根元素-->
    <div>
        <p>{{titleName}}</p>
        <p>用户名: {{userName}}</p>
        <p>角色: {{roleName}}</p>
    </div>
</template>
<script>
    //定义一个简单全局组件 1, 直接写字符串
    Vue.component('user-info-component',{
        template:'<div>' +
            '<p>用户名: {{userName}}</p>' +
            '<p>角色: {{roleName}}</p>' +
            '</div>',
        data: function () {
            return {
                userName:'admin',
                roleName:'管理员'
            }
        }
    });

    //定义一个简单全局组件 2, 引用template
    Vue.component('user-info-component2',{
        template:'#deptTemplate',
        data: function () {
            return {
                userName:'admin',
                roleName:'管理员'
            }
        },
        //定义调用者需要传的参数
        //注意, 注意,  命名在 JavaScript 中是 camelCase 的,  在 HTML 中是 kebab-case 的
        props:['titleName']
    });

    new Vue({
        el:'#app',
        //定义局部组件
        components:{
            'dept-select':{
                template: '<div><select><option v-for="item in data" :value="item.value">{{item.name}}</option></select></div>',
                data: function () {
                    return {
                        data:[
                            {value:'caiwu',name:'财务部'},
                            {value:'xinxi',name:'信息部'}
                        ]
                    }
                }
            }
        }
    });
</script>
</body>
</html>