1.Vue全家桶学习_组件化开发生命周期组件间传值_2020-0

作者: 鹰郡少年鹏 | 来源:发表于2020-03-16 22:33 被阅读0次

1.Vue全家桶学习_组件化开发生命周期组件间传值_2020-0
组件基础
Composition API的使用
react基础
VUE组件（传值，生命周期）
(Vue-cli)六、组件间传值（组件间传值&全局状态管理sto
【Vue3 从入门到实战进阶式掌握完整知识体系】011-探索组
vue 6种通信总结①
2018-09-19 组件
react-父子组件间通信

@@start遇到的问题@@
1.Vue 声明全局组件Vue.compontent=('...',{...});
-->问题：对象的语法拼写问题，跟Vue的语法类似，new Vue({...});==>Vue.component('name',{...});
@@end@@

1.Vue组件挂载关系图:

屏幕快照 2020-03-16 22.21.04.png

2.Vue组件挂载知识要点：

1.new 一个Vue对象
//怎么进行组件开发？
a.声明一个组件
b.挂载这个组件
c.使用这个组件

2.Var一个入口组件对象
var comName={//声明组件
template:’
<div>这是入口组件</div>
’
}，
components:{//挂载组件
    comName
}，
template:’
    <comName />//挂载组件
’

3.创建子组件挂载在入口组件上
template:’
    <div calss=“header”><Vheader /></div>
    <div calss=“slider”><Vslider /></div>
    <div calss=“content”><Vcontent /></div>
’
4.定义全局组件
new Vue({...});
Vue.component('name',{...});

3.Vue组件挂载代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件开发</title>
</head>
<body>
<div id="app">

</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //一.局部组件化逻辑
    //1.声子
    //2.挂子
    //3.用子
    //二.声明全局组件：Vue component("cpnName",{ template:'...'});
    // 全局组件
    Vue.component('Vbutton',{//既声明了又挂载了，组件可以直接使用
        data(){
            return{
                name:"button"
            }
        },
        template:'<input class="Vbutton" type="button" value="我是全局按钮">'
    });
    // 局部组件
    var Vheader = {
      data(){
          return{
              name:"我是header"
          }
      },
      components:{
      },
      template:'<div class="compWrap"><h5>{{this.name}}</h5><Vbutton/></div>'

    };
    var Vslider = {
        data(){
            return{
                name:"我是slider"
            }
        },
        components:{
        },
        template:'<div class="compWrap"><h5>{{this.name}}</h5><Vbutton/></div>'

    };
    var Vcontent = {
        data(){
            return{
                name:"我是content"
            }
        },
        components:{
        },
        template:'<div class="compWrap"><h5>{{this.name}}</h5><Vbutton/></div>'

    };
    // 入口组件
    var portal={//声明一个局部组件入口
        data(){
            return{

            }
        },
        components:{
            Vheader,
            Vslider,
            Vcontent
        },
        template:'<div><div class="hd"><Vheader/></div><div class="sl"><Vslider /></div><div class="cn"><Vcontent /></div></div>'

        };
    // 根对象root对象
    new Vue({//实例化一个Vue对象
        el:"#app",
        data() {
            return {

            };
        },
        components: {
            portal
        },
        template:'<div id="app"> <portal/></div>'


    });
    // console.log(Vbutton);
</script>
<style>
.compWrap{
    margin: 0px;
    padding: 0px;
    line-height: 100%;
}
h5{
    margin: 0px;
    padding: 0px;
    line-height: 100%;
}
.Vbutton{
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: blueviolet;
    text-align: center;
    color: white;
    border: 0px;
    margin: 10px;
}
.hd{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #2c3e50;
    color: beige;
    text-align: center;
    padding-top: 20px;
}
.sl{
    /*margin-top: 70px;*/
    width: 20%;
    height: 300px;
    line-height: 300px;
    background: #42b983;
    float:left;
    color:#ffffff;
    text-align: center;
    padding-top: 20px;
}
 .cn{
     /*margin-top: 70px;*/
     width: 80%;
     height: 300px;
     line-height: 300px;
     background: steelblue;
     float:left;
     color: white;
     text-align: center;
     padding-top: 20px;
 }
</style>
</body>
</html>