vue中的组件

组件：组件化开发（component） 是 Vue.js 最强大的功能之一。

作用：组件可以扩展HTML元素，封装可重用代码

（组件在命名是不可以使用HTML中的元素）

组件分为全局组件和局部组件

全局组件

<script>
<div id="itany">
<组件名></组件名>
//组件名不能用HTML元素

</div>
Vue.component('组件名'，{
  template:`<p>这是全局组件</p>`
})
new Vue({
  el:'#itany'
})

局部组件

<div id="itany">
<组件名></组件名>
</div>
    new Vue({
        el:'#itany',
        components:{
            '组件名':{
                template:`<p>12581</p>`
            }
        }
    })

注意

组件名不可以使用已存在的HTML元素
组件中data数据是一个函数并且要有这返回值

组件之间的传值

1.父给子传值（用属性传）
2.子给父传值（用事件传）
3.同级之间传值（用中间量传）

父给子传

<div id="app">
            <m-father></m-father>
        </div>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            Vue.component('m-father',{
                template:`
                  <div>
                      <m-child v-bind:tit='arrs'></m-child>
                      <m-second v-bind:tot='arr'></m-second>
                  </div>
                `,
                data:function(){
                    return{
                        arr:['王鹤棣','官鸿','梁靖康','吴希泽'],
                        arrs:'新f4',
                    }
                }
            })
            Vue.component('m-child',{
                props:['tit'],
                template:` 
                   <h1>{{tit}}</h1>
                `.
            })
            Vue.component('m-second',{
                props:['tot'],
                template:` 
                    <ul>
                        <li v-for="value in tot">{{value}}</li>
                    </ul>            
                            `
            })
            
            new Vue({
                el:'#app',
            })
        </script>

注意：在组件中data选项必须是一个函数且有返回值

组件props

选项props是父子组件间的桥梁
props格式为：props：[' 自定义属性'],

子给父传

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('my-father',{
                template:`
                <div>                   
                    <h1>这是父组件</h1>
                    <a href="#">{{mes}}</a>
                    <my-child @send='resMsg'></my-child>
                </div>
                `,
                data:function(){
                    return{
                        mes:''
                    }
                },
                methods:{
                    resMsg:function(see){
                        this.mes=see
                    }
                }
            })
            Vue.component('my-child',{
                template:`
                <div>
                    <h1>这是子组件</h1>
                      <input type='text' v-model='arr'>
                      <button v-on:click='sendMsg'>按钮</button>
                </div>
                `,
                data:function(){
                    return{
                        arr:''  
                    }       
                },
                methods:{
                    sendMsg:function(){
                        this.$emit('send',this.arr)
                    }
                }
            })      
            new Vue({
                el:'#app'
            })
        </script>

this.$emit('自定义事件'，参数)。

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件

非父子组件之间的通信

<div id="app">
            <child></child>
            <son></son>
        </div>
        <script src="js/vue.js"></script>
        <script>
               var bus=new Vue();  
               
            Vue.component('child',{
                template:`
                <div>
                <h1>这是child组件</h1>
                <button @click='sendMsg'>传送</button>
                </div>
                `,
                data:function(){
                    return{
                        msg:'这是child组件。传送给son',
                    }
                },
                methods:{
                    sendMsg:function(){
                        bus.$emit('send',this.msg)
                    }
                }
            })
            Vue.component('son',{
                template:`
                <div>
                <h1>这是son组件</h1>
                    <a href="">{{mess}}</a>
                </div>
                `,
                data:function(){
                    return{
                        mess:''
                        }
                },
                mounted:function(){
                    bus.$on('send',msg=>{
                        this.mess=msg
                    })
                }
            })
            new Vue({
                el:'#app'
            })
        </script>

非父子组件之间传值，需要定义个公共的公共实例but，作为中间仓库来传值