vue-组件

1.Vue中是如何引入组件（对象构造函数）
1.1. Vue是vue实例的构造函数，通过new Vue() 就可以得到vue实例
1.2. new Vue.extend这个方法得到的是 new Vue的一个子类
1.3. 平时我们不适用new 来实例化Vue.extend() , 将其当做标签来用
1.4. 组件在使用的时候，我们需要注册一下，
1.5. 注册提供了两种方式：全局注册，局部注册分别对应的是：全局组件局部组件
1.6. 组件也是一个实例，实例也是一个组件

    var vm = new Vue()
    var Component = Vue.extend() ;
    console.log( vm )
    console.log( new Component)

    // console.log( Vue ) // vue实例的构造函数
    // console.log( Vue.extend() ) //组件的构造函数

2.全局注册组件

<body>
    <div id="app">
        <hello></hello>
        <hello></hello>
    </div>
</body>
<script>
    // 注册的第一种方式： 全局注册
    var Hello = Vue.extend({
        template:'<h3>这里是组件的模板</h3>'
    })
    // 全局注册
        Vue.component('hello',Hello)
    // 使用 注册的组件必须挂载在一个实例上，才能使用
        new Vue({
            el:"#app",
        })
/*     技巧：
        1. 模板
        2. 组件名称
        3. 组件必须使用在实例中 */
</script>

3.局部注册组件

<body>
    <div id="app">
        <myYyb></myYyb>
    </div>
</body>
<script src="./base/vue.js"></script>
<script>
    /* 局部注册组件是将组件放在实例的配置项中 ，通过components属性引用，使用范围仅限当前实例 */
    // 1. 先来个组件的配置项（模板  数据 。。。）
        var Hello = Vue.extend({
            template:'<h1>这里是局部注册</h1>'
        })
    //2. 注册组件（局部注册）
        new Vue({
            el:'#app',
            components:{//局部组件
                "my-yyb":Hello  //组件的名称:组件的配置项
            }
        })
    // 3. 将组件名称当做标签写在当前实例中
</script>

4.其他创建方式

<body>
    <div id="app">
        <hello></hello>
        <item></item>
    </div>
</body>
<script src="./base/vue.js"></script>
<script>
    // 注册的第二种方式  Vue.extend()
    // 全局组件
        Vue.component('hello',{
            template:'<h3>这是全局组件的配置使用方式</h3>'
        })
    new Vue({
        el:'#app',
        // 局部组件
        components:{
            'item':{
                template:'<h4>这里是局部组件配置的使用</h4>'
            }
        }
    })
</script>

5.is属性的用法

<body>
    <div id="app">
        <table>
            <tr is = 'hello'>

            </tr>
        </table>
    </div>
</body>
<script src="./base/vue.js"></script>
<script>
    /* 
        像  table   ul   select  ...这类型里面的子级是死的 ，这类型我们直接使用组件时，无法正确解析，
        解决办法：  给他添加一个is属性
     */
    //使用规则
    Vue.component('hello',{
        template:'<tr><td>这里是组件使用规则</td></tr>'
    })
    new Vue({
        el:'#app',
    })
</script>

6.template模板
6.1 当我们的模板内容较多，较复杂时，这个配置项就有点复杂了---》
解决办法：使用template模板（html结构中）
6.2当然项目中我们不这样子使用，我们将来使用的是一种叫做jsx语法单文件组件
6.3template模板下直接元素只有一个

<body>
    <div id="app">
        <hello></hello>
    </div>
    <template id="hello">
        <div>
            <p>这里是template模板</p>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
    Vue.component('hello',{
        // 1. 当我们的模板内容较多，较复杂时，这个配置项就有点复杂了---》解决办法：使用template模板（html结构中）
        // 2.当然项目中我们不这样子使用，我们将来使用的是一种叫做jsx语法   单文件组件
        // 3. template模板下直接子元素只有一个
        template:'#hello'
    })

    new Vue({
        el:'#app'
    })
</script>

7.绑定is 属性

<body>
    <div id="app">
        <!-- <button @click = ' isShow = !isShow '>
            toggle
        </button>
        <aaa v-if = 'isShow'></aaa>
        <bbb v-else></bbb> -->

        <button 
            @click = ' component = (component == "bbb"?"aaa":"bbb") '
        >
            toggle
        </button>
        <component :is='component'></component>
        
    </div>
   
</body>
<script src="./base/vue.js"></script>
<script>
    // 绑定is 属性

    Vue.component('aaa',{
        template:'<h3>这里是aaa组件</h3>'
    })
    Vue.component('bbb',{
        template:'<h3>这里是bbb组件</h3>'
    })

    new Vue({
        el:'#app',
        data:{
            isShow:true,
            component:'bbb'
        }
    })
</script>

8.组件的嵌套

    /* 1. 在vue中，项目都有一个跟实例，这个根实例中有大量的组件，组件之间都可以发生嵌套，
    2. 在vue中，组件嵌套只能形成父子关系
    3. 对于全局组件来说，父子关系只是存在于嵌套的时候 */
<body>
    <div id="app">
        <father></father>
    </div>
    <script src="base/vue.js"></script>
    <script>   
       Vue.component("father",{
           template:"<h1>这里是father组件 <son></son></h1>"
       })
       Vue.component("son",{
           template:"<h4>这里是son组件 <grandson></grandson></h4>",
           components:{//components
               "grandson":{
                   template:"<h6>这里是grandson组件</h6>"
               }
           }
       })
       new Vue({
           el:"#app"
       })
    </script>
</body>

9.******（重点）组件之间的数据传递

<body>
   <div id="app">
        <father></father>
   </div>
   <template id="father">
       <div>
            <p>
                 这里是父组件
            </p>
            <input type="text" v-model = 'fatherData'>
            <p>
                {{fatherData}}
            </p>

            <hr>
            <son :aa = 'fatherData'></son><!-- 2.将这个数据通过一个自定义属性绑定在子组件标签上 -->
       </div>
      
   </template>
   <template id="son">
       <div>
            <p>
                这里是子组件
            </p>
            <p>
                这里是父传递给子级的数据：{{aa}}<!--4. 在子组件模板中就可以将这个属性当做data来直接使用 {{自定义属性}} -->
            </p>
       </div>
   </template>
</body>
<script src="./base/vue.js"></script>
<script>
  /* *****************s级重点 ： 父组件传递数据给子组件 ？ */  
    Vue.component('father',{
        template:'#father',
        data(){//1.在父组件中定义一个数据 ，（这个数据是使用的data函数的返回值）
            return {
                fatherData:'father'
            }
        }
    })
    Vue.component('son',{
        template:'#son',
        props:['aa']//3.在子组件的配置项目中使用props:['自定义属性'] 来接受来自父组件的数据
    })
    new Vue({
        el:'#app',
        data:{
            msg:'yyb'
        }
    })
</script>

10.*******sss使用的局部注册来实现父组件传递数据给子组件

<body>
    <div id="app">
        <father></father>
    </div>
    <template id="father">
        <div>
            <input type="text" v-model="soncolor">
            <hr />
            <son :color="soncolor"></son>
        </div>
    </template>
    <template id="son">
        <div>
            <input type="text" v-model="owncolor">
            <div :style="{background:owncolor}" class="box"></div>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
// ******** s 使用的局部注册 来实现 父组件传递数据给子组件 
    //父组件可以通过v-bind来为子组件传递数据，当父组件的数据改变的时候，子组件接收到的数据也会改变
    //父组件重新设置data数据的时候，会重新执行render函数，会重新给子组件传入最新的数据
    new Vue({
        el: "#app",
        components: {
            'father': {
                template: "#father",
                data: function () { 0
                    return {
                        soncolor: 'red'
                    }
                },
                components: {
                    'son': {
                        props: ['color'],
                        template: "#son",
                        computed: {
                            owncolor: function () {
                                return 'sky' + this.color
                            }
                        }
                    }
                }
            }
        }
    })
</script>

11.数据共享

<body>
  <div id="app">
    <aaa></aaa>
  </div>
  <template id="aaa">
        <div>
            <p>
                aaa组件
            </p>
            <input type="text" v-model="msg.val">
            <p>
                {{msg.val}}
            </p>
           <bbb :msg="msg"><!-- 将msg绑定给bbb -->
            <!-- 这里给的是对象 思路堆和栈原理。给bbb对象。相当于给了他地址-->

            </bbb>
        </div>
  </template>
  <template id="bbb">
        <div>
            <p>bbb组件 </p>
            <input type="text" v-model="msg.val">
            <p>
                {{msg.val}}
            </p>
        </div>
  </template>
  <script src="base/vue.js"></script>
  <script>
      Vue.component("aaa",{
          template:"#aaa",
          data(){
              return{//将msg的值更改为一个对象
                  msg:{val:"zsq"}
              }
          }
      })
      Vue.component("bbb",{
          template:"#bbb",
          props:["msg"]//获取msg
      })
      new Vue({
          el:"#app"
      })
  </script>
</body>

12.数据共享---数据类型验证（props验证/validator）

<body>
  <div id="app">
    <aaa></aaa>
  </div>
  <template id="aaa">
        <div>
            <p>
                aaa组件
            </p>
            <input type="text" v-model="num">
            <p>
                {{num}}
            </p>
            <hr>
            <bbb :num="num" :n="n">
                </bbb>
        </div>
  </template>
  <template id="bbb">
        <div>
            <p>bbb组件  </p>
            <input type="text" v-model="num">
            <p>
                {{n}}
            </p>
        </div>
  </template>
  <script src="base/vue.js"></script>
  <script>
      Vue.component("aaa",{
          template:"#aaa",
          data(){
              return{
                  "num":233,
                  "n":10
              }
          }
      })
      Vue.component("bbb",{
          template:"#bbb",
          //这里是数据验证
          props:{
                "num":Number,//常规检测数据类型
                "n":{
                    validator(val){//对数据进行条件验证检测。出现错误会在控制台报告
                    //validator函数的使用是为了解决我们除了数据类型检测之外的其他要求
                        return val>6;
                    }
                }   
          }
      })
      new Vue({
          el:"#app"
      })
  </script>
</body>

13.组件之间的通信

<body>
   <div id="app">
        <aaa></aaa>
   </div>
   <template id="aaa">
       <div>
           <p>这 里是aaa组件</p>  
            <p>
                {{msg}}
            </p>
           <hr>
           <bbb :fn = 'fn'></bbb>
       </div>
   </template>
   <template id="bbb">
        <div>
            <button @click = 'fn("word")'>
                say
            </button>
            <p>这里是bbb组件</p>
        </div>
   </template>
</body>
<script src="./base/vue.js"></script>
<script>
 

    // 将父组件中的方法传递给子组件，子组件中可以通过事件来触发这个属性，如果这个函数中参数和父组件中的数据联系起来，那么我们就可以实现一个 通过子组件事件来更改父组件数据的方式
    
    // 父组件传递数据给子组件考的是 属性绑定
    // 子组件传递数据给父组件靠的是 事件（方式）

    Vue.component('aaa',{
        template:'#aaa',
        data(){
            return {
                msg:'yyb'
            }
        },
        methods:{
            fn(val){
                this.msg = val ;
            }
        }
    })
    Vue.component('bbb',{
        template:'#bbb',
        props:['fn'],
        methods:{
            oFn(){
                console.log( this.$parent )
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>

14.组件之间的通信

<body>
   <div id="app">
        <aaa></aaa>
   </div>
   <template id="aaa">
        <div>
            <p>这是aaa组件</p>
            <input type="text" v-model='msg'>
            <p>
                {{msg}}
            </p>
            <hr>
            <bbb :msg = 'msg' ></bbb>
            <ccc :msg = 'msg' ></ccc>
        </div>
   </template>
   <template id="bbb">
        <div>
            <p>
                这是bbb组件
            </p>
            <input type="text" v-model='bbbData'>
            <p>
                {{bbbData}}
            </p>
            <p>
                这里是bbbmsg: {{bbbmsg}}
            </p>
        </div>
   </template>
   <template id="ccc">
        <div>
            <p>
                这是ccc组件
            </p>
            <input type="text" v-model='cccData'>
            <p>
                {{cccData}}
            </p>
        </div>
   </template>
</body>
<script src="./base/vue.js"></script>
<script>
    Vue.component('aaa',{
        template:'#aaa',
        data(){
            return {
                msg:'bingge'
            }
        }
       
    })
    Vue.component('bbb',{
        template:'#bbb',
        props:['msg','get'],
        data(){
            return {
                bbbmsg:'bingge'
            }
        },
        computed:{
            bbbData:{
                get(){
                    return this.msg ;
                },
                set( val ){
                    //
                    console.log(this.$parent)
                }
            }
        }
    })
    Vue.component('ccc',{
        template:'#ccc',
        props:['msg'],
        data(){
            return {
                cccmsg:'bingge'
            }
        },
        computed:{
            cccData:{
                get(){
                    return this.msg ;
                },
                set( val ){
                    //需求：修改bbb组件的值？
                    // d级小重点 ： 寻找父级的方式来进行组件之间的通信： 这类型方法对导致，我们书写的混乱一级不易维护
                   this.$parent.$children[0].bbbmsg = 'aaa' ;
                }
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

15.子组件通过方法传递数据给父组件

<body>
    <div id="app">
        <father ></father>
    </div>
    <template id="father">
        <div>
            <p>
                这里是father组件
            </p>
            <p>
                {{fatherData}}
            </p>
            <hr>
            <son @toson = 'get'></son>
        </div>
    </template>
    <template id="son">
        <div>
            <p>
                这里是son组件
            </p>
            <button @click = '_get'>
                发送
            </button>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
    // s级重点：子组件通过方法来传递数据
    Vue.component('father',{
        template:'#father',
        data(){
            return {
                fatherData:'father'
            }
        },
        methods:{
            get(val){//val就是son 组件传递过来的数据
                this.fatherData = val ;
            }
        }
    })
    Vue.component('son',{
        template:'#son',
        props:['toson'],
        data(){
            return {
                sonData:'son'
            }
        },
        methods:{
            _get(){
                this.$emit('toson',this.sonData)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

16.组件通信-ref

<body>
   <div id="app">
       <button @click = ' get'>
           get
       </button>
       <input type="text" v-model = ' msg '>
        <aaa ref = 'aaa'></aaa>
        <bbb ref = 'bbb'></bbb>
   </div>
   <template id="aaa">
        <div>
            <p>
                这里是aaa组件
            </p>
            <hr>
        </div>
   </template>
   <template id="bbb">
        <div>
            <p>
                这里是bbb组件
            </p>
            <p>
                {{msg}}
            </p>
        </div>
   </template>
</body>
<script src="./base/vue.js"></script>
<script>

      /* 
        1. 组件间不仅可以用过$root/$parent/$children来获取对应关系的组件，
        2. 父组件还可以主动的通过ref为子组件做标记也会形成ref链，也可以交互，注意多个子组件标记的是同一个组件，获取到的应该是一个数组 
        3. 如果是非父子组件也是可以进行通信的
      */

    Vue.component('aaa',{
        template:'#aaa',
        methods:{
            get(){
                this.$refs.son.msg = 'yyb'
            }
        }
    })
    Vue.component('bbb',{
        template:'#bbb',
        data(){
            return {
                msg:'bbb'
            }
        }
    })
    new Vue({
        el:'#app',
        data:{
            msg:'兵哥'
        },
        methods:{
            get(){
                //ref

                this.$refs.bbb.msg = this.msg
            }
        }
    })
</script>

17.组件通信-slot

<body>
    <div id="app">
        <item>
            <header>
                这里是头部
            </header>
            <h6>
                这里是item组件中的标签
            </h6>
            <footer>
                这里是底部
            </footer>
        </item>
    </div>
    <template id="item">
        <div>
            <slot></slot>
            <h3>
                这里是item组件
            </h3>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
        //在组件标签内部写入的内容默认的会被替换掉，如果想要在组件的模板里使用这些内容，就在对应的位置写上slot标签，这个slot标签就代表着这些内容
    /* 
            slot  称之为分发
        */
    Vue.component('item',{
        template:'#item'
    })
    new Vue({
        el:'#app'
    })
</script>

18.组件通信-slot-name

<body>
   <div id="app">
        <aaa>
            <nav slot = 'header'>
                这里是导航
            </nav>
            <footer slot='footer'>
                这里是底部
            </footer>
        </aaa>
   </div>
   <template id="aaa">
        <div>
            <slot name='header'></slot>
            <h3>这里是aaa组件</h3>
            <slot name='footer'></slot>
        </div>
   </template>
</body>
<script src="./base/vue.js"></script>
<script>
   //在slot内容上通过slot属性标记后，在子组件中使用slot的时候可以用name属性去指定
    Vue.component('aaa',{
        template:'#aaa'
    })
    new Vue({
        el:'#app',
    })
</script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,744评论 6赞 502
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,505评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,105评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,242评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,269评论 6赞 389
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,215评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,096评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,939评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,354评论 1赞 311
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,573评论 2赞 333
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,745评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,448评论 5赞 344
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,048评论 3赞 327
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,683评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,838评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,776评论 2赞 369
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,652评论 2赞 354

vue-组件

推荐阅读更多精彩内容