2018-09-19组件，组件的嵌套，组件之间的传值

1.什么是组件：

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

注：
         组件名不可以使用已经存在的html元素;
         组件中的data数据是一个函数，并且要有一个返回值

···

（1）全局组件

HTML

<div id='app'>
       <自定义的组件标签名字></自定义的标签名字>

   </div>
<script>

Vue.component('组件名字',{
            template:`
                  <ul>
                        <li>
                            <a href="">首页</a>
                        </li>
                  </ul>
            `
        })

new Vue({
            el:"选择器"
        })

 </script>

（2）局部组件

HTML

<div id='app'>
       <自定义的组件标签名字></自定义的标签名字>
   </div>


<script>

 new Vue({
           el:'#app',
           data:{},
           methods:{},
           filters:{},
           computed:{},
           components:{
              '组件名t':{
                  template:`

                  <ul>
                        <li>
                            <a href="">首页</a>
                        </li>
                  </ul>
                  `
               }
           }

       })
</script>

2.弹出框

<div id='app'>
//全局组件
      
      <my-component></my-component>
  </div>
   <script src='js/vue.js'></script> 
   <script>
    Vue.component('my-component',{
        template:`
               <div>
                   <p>{{mess}}</p>
                   <button @click='alt'>按钮</button>
               </div>
         `,
        data:function(){
            return{
                mess:'我是组件中的值'
            }
        },
        methods:{
            alt:function(){
                alert('bdsjjf')
            }
        }
    })   
       
       
    new Vue({
        el:"#app"

    })
    </script>

3.组件之间的传值

<div id='app'>
      <my-father></my-father>
  </div>
   <script src='js/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>

1.png

4.组件之间的传值

<div id='app'>
       <my-father></my-father>
   </div>
    <script src='js/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>
                 </ul>
                 <a href='#'>{{num}}</a>
             </div>
             `
       })
       

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

2.png