前端 ---- Vue组件

1.组件的注册 
    也分为全局和局部注册，
    .app也是组件，组件也有父子关系
    模板内容 可以用模板字符串``
    
    1.简单使用：
        <div id="example">
          <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
          <my-component></my-component>
        </div>
        <script>
            //   注册组件 
            // 1、 my-component 就是组件中自定义的标签名
            Vue.component('my-component', {
              template: '<div>A custom component!</div>'
            })

            // 创建根实例
            new Vue({
              el: '#example'
            })

        </script>

    
    ···········注意事项·······
        1.组件参数的data值必须是函数同时这个函数要求返回一个对象  
            data一定是函数，这样就可以形成一个闭包的数据
        2.组件模板必须是单个根元素 
        模板必须是单个根元素如：template :'<button @click="handle">点击了{{count}}次</button>',
        3.组件模板的内容可以是模板字符串
        但是如果想要两个button标签的话可以加个div，如这样template :'<div><button @click="handle">点击了{{count}}次</button><button>测试</button></div>',
        4.命名方式：
        Vue.component('my-component'   OR  'MyComponent', { /* ... */ })
        '-'短横线 'hello-world'和驼峰式（大写）'HelloWorld'但是驼峰式只能在字符串模板中`<HelloWorld></HelloWorld>`使用，在普通的标签模板中是错的（即不能在外面直接<HelloWorld></HelloWorld>）
        但是驼峰式的标签HelloWorld，可以直接使用短横线式的来调用<hello-world></hello-world>，反之不行
        -------------所以最好还是短横线吧----------------------

    2.局部组件的注册
          <div id="app">
              <my-component></my-component>
          </div>


        <script>
            // 定义组件的模板
            var Child = {
              template: '<div>A custom component!</div>'
            }
            new Vue({
              //局部注册组件  
              components: {
                // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
                'my-component': Child
              }
            })
         </script>

2.工具调试
3.组件间数据交互

    1.属性名规则
        在props中使用驼峰形式，模板中需要使用短横线的形式
        字符串形式的模板中没有这个限制
        Vue.component(‘menu-item', {
        // 在 JavaScript 中是驼峰式的
        props: [‘menuTitle'],
        template: '<div>{{ menuTitle }}</div>'
        })
        <!– 在html中是短横线方式的 -->
        <menu-item menu-title=“nihao"></menu-item>



    2.属性类型
        1.字符串
        2.数字  传入的时候参数名前要加: 不然传入类型就是string
        3.布尔值 同上
        4.数组 同上
        5.对象 同上
        
	3.父子   props
        - 父组件发送的形式是以属性的形式绑定值到子组件身上。
        - 然后子组件用属性props接收
        - 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
		静态：<menu-item title="来自父组件的数据"></menu-item>
		动态：<menu-item :title="title"></menu-item>
        区别在这个':'  经常忘了，气死了！！！！

        
        props传递数据原则：单向数据流 只能父--->子  但是子组件能修改和操作父组件传递过来的参数
        但是子组件也能向父组件传递信息（父组件中的模板）：----->$emit，
        触发事件：
            子： <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
            父： <menu-item :parr='parr' @enlarge-text='fontSize += 5'></menu-item>
            父： <menu-item :parr='parr' @enlarge-text='handle'></menu-item>   也可以是方法
        传值： $event
            子：<button @click='$emit("enlarge-text"，0.1)'>扩大父组件中字体大小</button>
            父： <menu-item :parr='parr' @enlarge-text='fontSize += $event'></menu-item>
            父： <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>   也可以是方法

        
        
	4.兄弟
        组件A (监听)<=====>(触发) 事件中心 (触发)<=====>(监听)组件B
        1.单独的事件中心管理组件的通信
        var eventHub = new Vue()
        2. 监听事件与销毁事件
        eventHub.$on('add-todo', addTodo)
        eventHub.$off('add-todo')
        3. 触发事件
        eventHub.$emit(‘add-todo', id)
    
    5.组件插槽的作用
        1. 插槽位置
            Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
              <strong>Error!</strong>
              <slot></slot>
            </div>
            `
            })
        2. 插槽内容
            <alert-box>Something bad happened.</alert-box>
        
    6.具名插槽用法
        1. 插槽定义
            <div class="container">
                <header>
                  <slot name="header"></slot>
                  <slot name="header"></slot>
                </header>
                <main>
                  <slot></slot>
                  </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
        2. 插槽内容
            <base-layout>
                <h1 slot="header">标题内容</h1>
                <p>主要内容1</p>
                <p>主要内容2</p>
                <p slot="footer">底部内容</p>
            </base-layout>
    
    7.作用域插槽
        应用场景：父组件对子组件的内容进行加工处理
        1. 插槽定义
        <ul>
            <li v-for= "item in list" v-bind:key= "item.id" >
                <slot v-bind:item="item">
                    {{item.name}}
                </slot>
            </li>
        </ul>
        2. 插槽内容
        <fruit-list v-bind:list= "list">
            <template slot-scope="slotProps">
                <strong v-if="slotProps.item.current">
                    {{ slotProps.item.text }}
                </strong>
            </template>
        </fruit-list>










        
        


		








9.组件插槽
    1.普通插槽
        在模板中设定 Vue.component('alert-box',)template=`<slot></slot>` 然后在父组件中使用<alert-box>插入内容</alert-box>  内容就会传到slot中，如果内容带标签也会把对应标签展示出来
        <slot>默认内容</slot>中可以有默认内容，如果父组件使用<alert-box>却没插入内容，就会在父组件中显示默认内容

    2.具名插槽
        插槽定义：
            Vue.component('base-layout', {
              template: `
                <div>
                  <header>
                    <slot name='header'></slot>
                  </header>
                  <main>
                    <slot></slot>
                  </main>
                  <footer>
                    <slot name='footer'></slot>
                  </footer>
                </div>
              `
            });
        内容：1.
            <base-layout>
              <p slot='header'>标题信息</p>
              <p>主要内容1</p>
              <p>主要内容2</p>
              <p slot='footer'>底部信息信息</p>
            </base-layout>
             2.如果想往同一个name中插入比较多的数据，可以用template
             <base-layout>
              <template slot='header'>
                <p>标题信息1</p>
                <p>标题信息2</p>
              </template>
              <p>主要内容1</p>
              <p>主要内容2</p>
              <template slot='footer'>
                <p>底部信息信息1</p>
                <p>底部信息信息2</p>
              </template>
            </base-layout>
        结果就是：标签和内容都会过去
            <div>
              <header>
                <p>标题信息</p>
              </header>
              <main>
                  <p>主要内容1</p>
                  <p>主要内容2</p>
              </main>
              <footer>
                <p>底部信息信息</p>
              </footer>
        </div>
        
        
        
        
        


































    3. 插槽作用域
        父组件堆子组件的内容进行加工处理，样式也可以
        插槽模板：子
            Vue.component('fruit-list', {
              props: ['list'],
              template: `
                <div>
                  <li :key='item.id' v-for='item in list'>
                    <slot :info='item'> {{item.name}} </slot> 
                  </li>
                </div>
              `
            });
        插槽内容：父
            <fruit-list :list='list'>
                <template slot-scope='slotProps'>
                  <strong v-if='slotProps.info.id==2'>{{slotProps.info.name}}</strong>
                  <span v-else>{{slotProps.info.name}}</span>
                </template>
            </fruit-list>



案列：购物车
1.event
    <input type="text"  :value='item.num' @blur='change(item.id, $event)'/>
    函数可以通过可以通过event来获得Input栏的值
    changeNum: function(id, event){
            num=event.target.value
        },

内容：传参、
触发方法：传参
样式：插槽作用域