03-全局局部组件

• html

<div class="box" id="box1">
    <unit-one></unit-one>
</div>


<div class="box" id="box2">
    <unit-two></unit-two>
</div>
<div class="box" id="box3">
    <child-one></child-one>
    <child-two></child-two>
</div>

<ul class="box" id="box4">
    <li is="tag-dif"></li>
</ul>

<ul id="box5">
    <prop-unitone title="123456" con="rrr"></prop-unitone>
    <prop-unitone title="67890" con="fff"></prop-unitone>
    <prop-unitone title="23456" con="hhh"></prop-unitone>
</ul>

<ul id="box6">
    <!--v-bind:xxx 是传入props里面的名字-->
    <unit-arr1 v-for="post in postArr" v-bind:title1="post.title"></unit-arr1>
    <!--也可以把单独数组的对象传过去-->
    <unit-arr2 v-for="post in postArr" v-bind:posts="post"></unit-arr2>
</ul>

<div class="box" id="box7" :style="{fontSize:num+'px'}">
    <p>{{num}}</p>
    <box7-child1 v-on:add-num="addNum" v-on:reduce-num="num-=2"></box7-child1>
</div>

<div class="box" id="box8">
    <alert-box>啦啦啦啦！我是插槽的内容</alert-box>
    <alert-box>啦啦啦啦！嘿嘿我也可以这么写哦</alert-box>
</div>

• js

    // Vue.component('组件名',方法)
    // 组件命名规则：
    // 不使用驼峰，因为有dom包围的情况下会报错； 都使用小写或者a-b短横线的形式。


    // 全局组件必须写在Vue实例创建之前，才在该根元素下面生效，否则报错。


    // 相同点：
    // 组件中的其他属性，可以和实例中的一样，data必须是一个函数。
    // 模板里面第一级只能有一个标签，不能并行写成<div></div><p></p> 应该写为：<div><p></p></div>，否则报错且只渲染第一个标签
    // 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等


    // 全局
    Vue.component('unit-one', {
        template: '<h6>我是全局组件1</h6>'
    });
    Vue.component('unit-two', {
        template: '<h6 @click="addNum">我被点击{{num}}次</h6>',
        data: function () {
            return {num: 1}
        },
        methods: {
            addNum: function () {
                this.num++
            }
        }
    });

    var box1 = new Vue({
        el: "#box1"
    })
    var box2 = new Vue({
        el: "#box2"
    })


    var box3ChildsTemp={
        'child-one':{
            template:"<p>我是局部组件的内容</p>"
        },
        'child-two':{
            template:'<p @click="twoClick">我是局部组件的内容2{{k}}</p>',
            data:function () {
                return {k:100}
            },
            methods:{
                twoClick:function () {
                    return this.k+=2;
                }
            }
        }
    }
    var box3=new Vue({
       el:"#box3",
        // 注册局部组件 用components对象
        // 也可以将该对象也在外面方便整理
       components:box3ChildsTemp

    });



    // 当使用 DOM 作为模板时 (例如，将 el 选项挂载到一个已存在的元素上)，
// 自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。
//     变通的方案是使用特殊的 is 属性：

    Vue.component('tag-dif',{
        template:'<li>我是不同标签的内容哦{{msg}}</li>',
        data:function () {
            return {msg:10}
        }
    });

    var box4=new Vue({
       el:"#box4"
    });


    // 通过 props 向子组件传递数据,props 为元素的属性key,必须对应取值和写入
    Vue.component('prop-unitone',{
       props:['title','con'],
       template:'<li>{{title}}{{con}}</li>'
    });
    var box5=new Vue({
        el:"#box5"
    });

   var box6=new Vue({
      el:"#box6",
      components:{
         'unit-arr1':{
             props:['title1'],
             template:'<li>{{title1}}</li>'

         },
          'unit-arr2':{
              props:['posts'],
              template:'<li>名字是：{{posts.title}} id是：{{posts.id}}</li>'

          }
      },
      data:{
        postArr: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
    ]
      }
   });

   // 监听子组件的事件
   var box7=new Vue({
      el:"#box7",
      data:{
          num:1
      },
      components:{
          'box7-child1':{
              template:'<div><button @click="$emit(\'reduce-num\')">点我减小父级内数字的数量</button><button @click="$emit(\'add-num\')">点我增加父级内数字的数量</button></div>'
         }
      },
      methods:{
          addNum:function () {
              return this.num+=2;
          }
      }

   });

//    插槽
    Vue.component('alert-box',{
       template:` <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
    });

    var box8=new Vue({
       el:'#box8'
    });