VUE框架自定义组件复用局部配置和全局配置以及命名原则------VUE框架

最新推荐文章于 2024-04-20 08:41:27 发布

旧约Alatus

最新推荐文章于 2024-04-20 08:41:27 发布

阅读量1k

点赞数 25

分类专栏： # VUE框架前端文章标签： javascript 前端 vue.js 前端框架 ecmascript vue js

本文链接：https://blog.csdn.net/2201_75960169/article/details/134785598

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        
        <userlist></userlist>
        <Login></Login>
        
        
        
        
    </div>
    <div id="app1">
        <userlist></userlist>
        <Login></Login>
        <helloworld></helloworld>
    </div>
    
    
    
    
    
    <script>
        // 创建组件
        const abc = {
            template : `<h1>哈哈哈哈哈哈</h1>`
        };
        Vue.component("helloworld",abc);
        // 创建组件
        const myCon1 = Vue.extend({
            template : `
                <div>
                    <h3>用户登录</h3>
                    <form @submit.prevent="login()">
                        账号:<input type="text" v-model="username"/><br><br>
                        密码:<input type="password" v-model="password"/><br><br>
                        <button>登录</button>
                    </form>
                </div>
            `,
            data(){
                return {
                    username : "",
                    password : ""
                }
            },
            methods : {
                login(){
                    alert(this.username+this.password);
                }
            }
        });
        // 第一步创建组件,传递的内容和我们new Vue传递的内容几乎是一样的
        const myCon = Vue.extend({
            // 创建组件的时候,不能使用EL配置项,只能使用TEMPLATE配置项(模板语句)
            template : `
                <ul>
                    <li v-for="user,index in users" :key="user.id">
                        {{index}}:{{user.id}}:{{user.name}}
                    </li>
                </ul>
            `,
            // 创建组件的时候,配置项不能使用el配置项
            // 在组件中的data必须是function返回对象的方式获取数据
            // 配置项的data必须使用function
            data()
            {
                return {
                    users : [
                        {id : "001",name : "Jack"},
                        {id : "002",name : "Rose"},
                        {id : "003",name : "Tom"},
                        {id : "004",name : "Jerry"}
                    ]
                }
            }
            // 如果是大括号的形式就会导致多个data共享一个数据,复用就实现不了
            // 比方说我们在多个页面中都使用了同一个组件
            // 一旦该组件的数据更新,就会导致我们多个页面的内容遭到更新
            // 使用函数的形式就能保证每次返回的是一个单独的数据
        });
        // 搞一个全局注册
        Vue.component('userlist',myCon);
        Vue.component('Login',myCon1);
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello"
            },
            // 这里是局部注册
            // 注册组件在这里注册
            components : {
                // 左边是我们组件的名字,右边是组件
                userlist : myCon,
                Login : myCon1
            }
        });
        const vm1 = new Vue({
            el : "#app1"
        });
        // let data = {
        //     counter : 1
        // };
        // function data(){
        //     return {
        //         counter : 1
        //     }
        // };
        // let x = data();
        // let y = data();
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>



<userlist></userlist>

<Login></Login>









</div>

<div id="app1">

<userlist></userlist>

<Login></Login>

<helloworld></helloworld>

</div>











<script>

// 创建组件

const abc = {

template : `<h1>哈哈哈哈哈哈</h1>`

};

Vue.component("helloworld",abc);

// 创建组件

const myCon1 = Vue.extend({

template : `

<div>

<h3>用户登录</h3>

<form @submit.prevent="login()">

账号:<input type="text" v-model="username"/><br><br>

密码:<input type="password" v-model="password"/><br><br>

<button>登录</button>

</form>

</div>

`,

data(){

return {

username : "",

password : ""

}

},

methods : {

login(){

alert(this.username+this.password);

}

}

});

// 第一步创建组件,传递的内容和我们new Vue传递的内容几乎是一样的

const myCon = Vue.extend({

// 创建组件的时候,不能使用EL配置项,只能使用TEMPLATE配置项(模板语句)

template : `

<ul>

<li v-for="user,index in users" :key="user.id">

{{index}}:{{user.id}}:{{user.name}}

</li>

</ul>

`,

// 创建组件的时候,配置项不能使用el配置项

// 在组件中的data必须是function返回对象的方式获取数据

// 配置项的data必须使用function

data()

{

return {

users : [

{id : "001",name : "Jack"},

{id : "002",name : "Rose"},

{id : "003",name : "Tom"},

{id : "004",name : "Jerry"}

]

}

}

// 如果是大括号的形式就会导致多个data共享一个数据,复用就实现不了

// 比方说我们在多个页面中都使用了同一个组件

// 一旦该组件的数据更新,就会导致我们多个页面的内容遭到更新

// 使用函数的形式就能保证每次返回的是一个单独的数据

});

// 搞一个全局注册

Vue.component('userlist',myCon);

Vue.component('Login',myCon1);

const vm = new Vue({

el : "#app",

data : {

msg : "Hello"

},

// 这里是局部注册

// 注册组件在这里注册

components : {

// 左边是我们组件的名字,右边是组件

userlist : myCon,

Login : myCon1

}

});

const vm1 = new Vue({

el : "#app1"

});

// let data = {

// counter : 1

// };

// function data(){

// return {

// counter : 1

// }

// };

// let x = data();

// let y = data();

</script>

</body>

</html>