Vue组件

一、事件修饰符
事件修饰符：
// .stop阻止事件冒泡 **
// .prevent阻止事件的默认行为 **
// .capture事件捕获
// .self自身触发
// .once只触发一次

二、组件
组件式vue最强大的功能之一
可以扩展html元素，封装可以重用的代码

    优点：
     1.能减少代码的重用，提高开发效率
     2.降低页面的耦合度，使页面更方便维护和管理


2.1局部组件

    new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{},
        filters:{},
        watch:{},
        // components:{//局部
        //     'my-component':{
        //         template:`
        //           <div>
        //             <h1>ｈｅｌｌｏ　ｃｏｍｐｏｎｅｎｔ</h1>  
        //             <input> 
        //           </div>               
        //         `//模板 html元素
                     
        //     }
        // }
    })



      (推荐使用)
      var col={
        template:`
                  <div>
                    <h1>{{msg}}</h1>  
                    <input> 
                    <button @click="alt">按钮</button>
                  </div>    
        `,
        data:function(){
            return{
                msg:"hello vue",
                txt:5
            }
        },
        methods:{
            alt(){
                alert()
            }
        }
    }
      new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{},
        filters:{},
        watch:{},
        components:{
            'my-component':col
        }
    })


2.2  全局组件

  Vue.component('my-component',{
        template:`
            <div>
                <h1>这是全局组件</h1>
                <input>
            </div>
        `,
        data:function(){
            return{

            }
        },
        methods:{

        }
    })

    new Vue({
        el:"#app"
    })


2.3组件的嵌套

    <script>
        Vue.component('my-component',{
            template:`
                <div>
                    <p>{{msg}}</p>
                </div>
            `,
            data:function(){
                return{
                    msg:'hello vue'
                }
            }
        })


        Vue.component('father',{
            template:`
                <div>
                    <h1>我是父组件</h1>
                    <my-component></my-component>
                </div>
            `
        })

        new Vue({
            el:"#app",

        })
    </script>

2.4组件间的通信

    //组件之间的通信传值
            //父组件给子组件传值
                   1.用属性传  在子组件中用props定义属性 props:['属性名']
            //子组件给父组件传值
                   1.用方法传   $emit('事件')
            //兄弟组件之间的传值


    2.4.1：父组件给子组件传值
        <script>
            Vue.component('pa',{
                template:`
                    <div>
                            <h1>我是父组件</h1>
                            <my v-bind:txt="msg"></my>
                    </div>

                `,
                data:function(){
                    return{
                        msg:'我是父组件中的数据，要传给给子组件'
                    }
                }
            })
            
            Vue.component('my',{
                //传一个属性
                props:['txt'],
                template:`
                <div>
                        <h1>我是子组件</h1>
                        <p>{{txt}}</p>
                </div>
                `
            })



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


        vue实例给组件传值
         <script>
            Vue.component('pr',{
                props:['txt'],
                template:`
                    <div>
                        <h1>{{txt}}</h1>
                    </div>
                
                `
            })

            new Vue({
                el:"#app",
                data:{
                    msg:'hello vue'
                }
            })
         </script>