组件

笔记：

组件（component）：组件化开发，组件可以扩展HTML元素，封装可重用的代码。
全局组件
局部组件
注：组件名不可以使用已经存在的HTML元素
注：组件中的data数据是一个函数，并且要有夜歌返回值（return）

组件1.

<div id="app">
    <my-father></my-father>
</div>
<script>
    Vue.component('my-father',{
        template:`
                <div>
                    <my-tit v-bind:tit="title"></my-tit>
                    <my-fruit v-bind:fruList="list"></my-fruit>
                </div>
            `,
        data:function(){
            return{
                list:["apple","banana","pear"],
                title:"水果列表"
            }
        }
    })

    Vue.component('my-tit',{
        props:["tit"],
        template:`
                <h2>{{tit}}</h2>
            `
    })
    Vue.component("my-fruit",{
        props:["fruList"],
        template:`
            <ul>
                <li v-for="value in fruList">{{value}}</li>
            </ul>
        `
    })
    new Vue({
        el:"#app"
    })
</script>

组件2.

 <div id="app">
        <my-tomponent></my-tomponent>
        
    </div>
    <script>
        Vue.component('my-tomponent',{
            template:`
                <div>
                    <p>{{msg}}</p>
                    <button @click='btn'>按钮</button>
                </div>
            `,
            data:function(){
                return{
                    msg:'asdfasf'
                }
            },
            methods:{
                btn:function(){
                    alert(21312313)
                }
            }
        })
        new Vue({
            el:"#app"
        })
    </script>

组件的嵌套

<div id='app'>
       <my-father></my-father>
      
   </div>
    <script src='vue.js'></script>
    <script>
       Vue.component("my-father",{
           template:`
               <div>
                  <h1>这是父组件</h1>
                   <my-child v-bind:num='msg'></my-child>

               </div>
            `,
           data:function(){
               return{
                   msg:'我是父组件中的值'
               }
           }
       }) 
       
       Vue.component("my-child",{
           props:['num'],
           template:`
              <div>
                 <ul>
                     <li>这是子组件的内容1</li>
                     <li>这是子组件的内容2</li>
                     <li>这是子组件的内容3</li>
                 </ul>
                 <a href='#'>{{num}}</a>
             </div>
             `
       })
       

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

组件中的传值，父传子

 <div id='app'>
      <my-father></my-father>
  </div>
   <script src='vue.js'></script>
   <script>
       Vue.component('my-father',{
           template:`
                <div>
                     <my-tit v-bind:tit='title'></my-tit>
                     <my-fruit v-bind:fruList='list'></my-fruit>
                </div>
           `,
           data:function(){
               return{
                   list:['apple','pear','banana'],
                   title:'水果列表'
               }
           }
       })
       
       Vue.component('my-tit',{
           props:['tit'],
           template:`
                 <h2>{{tit}}</h2>
               `
       })
       
       
       Vue.component('my-fruit',{
           props:['fruList'],
           template:`
                <ul>
                    <li v-for="value in fruList">{{value}}</li>
                </ul>
             `
       })
       
       
       new Vue({
           el:'#app'
       })
    
    </script>

组件中的传值,子传父

<div id="app">
    <my-fa></my-fa>
</div>
<script>
    Vue.component('my-f',{
        template:`
            <div>
                <h1>父组件</h1>
                <a>内容:{{msg}}</a>
                <my-c @click='fun2'></my-c>
            </div>
        `,
        data:function(){
            return{
                msg:""
            }
        },
        methods:{
            fun2:function(txt){
                this.msg=txt
            }
        }
    })
    Vue.component('my-c',{
        template:`
            <div>
                <h1>子组件</h1>
                <input v-model="arr">
                <button @click='fun'>点击</button>
            </div>
        `,
        data:function(){
            return{
                arr:""
            }
        },
        methods:{
            fun:function(){
//                   this.$emit('事件',参数)
                this.$emit('fu',this.arr)
            }
        }
    })
    new Vue({
        el:""
    })
</script>