05-Vue中的局部组件

最新推荐文章于 2024-04-23 15:51:39 发布

凇戈

最新推荐文章于 2024-04-23 15:51:39 发布

阅读量100

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42443397/article/details/101724358

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       *{
           padding: 0;
           margin: 0;
       }
       .main{
           width: 100%;
       }
       .head{
           width: 100%;
           height: 80px;
           background-color: purple;

       }
       .main2{
           width: 100%;
           height: 1000px;
       }
       .main2 .aside{
           float: left;
           width: 30%;
           height: 100%;
           background-color: green;
       }
       .main2 .content{
           float: left;
           width: 70%;
           height: 100%;
           background-color: red;
       }
   </style>
</head>
<body>
   <div id="app"></div>
   <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
   <script type="text/javascript">

// 全局组件

       // 第一个参数是组件的名字，第二个参数是options
       Vue.component('Vbtn',{
           template:`
               <button>按钮</button>
           `
       });

       var Vcontent = {
      template:`
               <div class='content'>我是内容组件
                   <Vbtn />
               </div>
           `
   }

   var Vaside = {
      template:`
               <div class='aside'>我是侧边栏组件
                   <Vbtn></Vbtn>
               </div>
           `
   };

       // 局部组件：声子挂子用子
       var Vheader = {
           template:`
               <div class='head'>
                   我是头部组件
                   <Vbtn></Vbtn>
               </div>
           `
       };

       // 1.声明局部组件
       var App = {
           template:`
               <div class='main'>
                   <Vheader />
                   <div class = 'main2'>
                       <Vaside />
                       <Vcontent />
                   </div>
               </div>
           `,
           data(){
               return {

               }
           },
           components:{
               Vheader,
               Vaside,
               Vcontent
           }
       };

       new Vue({
           el:'#app',
           template:'<App></App>',
           data(){
               return {

               }
           },
           // 2.挂载组件
           components:{
               App
           }
       });

</script>

</body>
</html>

凇戈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-Vue中的局部组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0;...
复制链接

扫一扫

专栏目录