vue---day02

1. 全局组件的注册

   - 创建根实例的时候，data可以是object，也可以是函数
   - 创建组件的时候，data必须是函数

   1.1 创建

         Vue.component('global-component',{
             template:`
                 <div>
                     <h1>{{ hello }}</h1>
                 </div>
             `,
             data(){
                 return {
                     hello:'hello'
                 }
             },
         })

   1.2 使用

        let vm = new Vue({
             el:'#app',
             template:`
                 <global-component></global-component>
             `,
         })

   1.3 使用

        <div id="app">
            <global-component></global-component>
        </div>

        let vm = new Vue({
            el:'#app',
        })

2. 局部组件

    - data必须是函数(单体函数)
    - 没有el属性    

 　　　2.1 创建局部组件  实质就是创建JavaScript object

         let Header = {
             template:`
                 <div>{{ hello }}</div>
             `,
             data(){
                 return {
                     'hello':'hello',
                 }
             },
         };

     2.2 注册

         2.2.1
             //单独使用
             new Vue({
                 el:'#app',
                 template:`<app-header></app-header>`,
                 components:{
                     'app-header':Header,
                 },
             });

         2.2.2
             //嵌套使用
             let App = {
                 template:`
                     <div>111</div>
                     <app-header></app-header>
                 `,
                 components:{
                     'app-header':Header,
                 },
             };

             new Vue({
                 el:"#app",
                 template:`<App></App>`,
                 components:{
                     App,
                 },
             });

3. 组件之间通信

    - 父子组件之间的数据 传递拥props  接受父组件的一个事件
    - 子父组件之间的数据 传递拥$emit  触发父组件的一个事件

    3.1 父子之间通信

 　　<div id="app>
             ...
         </div>

         let Header = {
             template:`
                 <div>{{ xxx }}</div>
             `,
             props:['xxx'],
         };

         let App = {
             template:`
                 <app-header :xxx='parent-data'></app-header>
             `,

             components:{
                 'app-header':Header,
             },
             data(){
                 return {
                     'parent-data':'父组件的数据',
                 }
             }
         };

         new Vue({
             el:'#app',
             template: `<App></App>`,
             components:{
                 App,
             }
         })

    3.2 子父组件的通信

  　　<div id="app">

         </div>

        let Header = {
             template: `
                 <div>
                     <button @click="xxx">给父组件传递数据</button>
                 </div>
             `,
             data() {
                 return {
                     'childData': '子组件的数据'
                 }
             },
             methods: {
                 xxx() {
                     this.$emit('ooo',this.childData);
                 }
             }
         };

        let App = {
             template: `
                     <div>
                         <h1>父组件接受的数据---{{ childData }}</h1>
                         <app-header @ooo="get_data"></app-header>
                     </div>
             `,

             data() {
                 return {
                     'childData': '1',
                 }
             },
             components: {
                 'app-header': Header,
             },

             methods: {
                 get_data(value) {
                     console.log(111,value)
                     this.childData = value;
                 }
             },

        };

        new Vue({
             el: '#app',
             template: `<App></App>`,
             components: {
                 App,
             },
        })

4. 混入

    - 定义一个mixs  object 然后写方法methods(){}
    - 使用：mixins = [minx]
    - 解决代码重用

 　　<div id="app">
         <dog></dog>
         <cat></cat>
     </div>

     <script>

         let mixs = {
             methods:{
                 show(value){
                     alert(value+'来了');
                 },
                 hide(value){
                     alert(value+'走了');
                 },
             }
         };

         let Cat = {
             template: `
                 <div>
                     <button @click="show('小猫')">小猫来了</button>
                     <button @click="hide('小猫')">小猫走了</button>
                 </div>
                `,
             data() {

             },
             mixins:[mixs]
         };

         let Dog = {
             template: `
                 <div>
                     <button @mouseenter="show('小狗')">Come</button>
                     <button @mouseleave="hide('小狗')">Go</button>
                 </div>
                 `,
             mixins: [mixs],
         };

         new Vue({
             el: '#app',
             components: {
                 'dog':Dog,
                 'cat':Cat,
             },
         })

     </script>

5. 插槽

  　　<div id="app">
         <global-components>首页</global-components>
         <global-components>轻课</global-components>
         <global-components>学位课</global-components>
     </div>

     Vue.components('global-components',{
         template:`
             <div><slot></slot></div>
         `
     })

     new Vue({
         el:'#app',
     })

6. 具名插槽

 　　<div id="app">
         <global-components>
             <div>
                 <slot name="header>这是头部</slot>
                 <slot name="footer>这是尾部</slot>
             </div>
         </global-components>

     </div>

     Vue.components('global-components',{
         template:`
             <div>
                 <slot name="footer"></slot>
                 <slot name="header"></slot>
             </div>
         `
     })

     new Vue({
         el:'#app',
     })