Vue组件2

Vue 2019-10-16 787

内容:
1.绑定原生事件
2.非父子组件传值
3.插槽(slot)
4.作用域插槽
5.动态组件与v-once指令

1.绑定原生事件

<body>    
    <div id="app">    
        <child @click1="handleClick"></child>    
        <child @click.native="handleClick2"></child>    
    </div>    
</body>    
<script>    
    Vue.component('child', {    
        template: '<div @click="handleChildClick">Child</div>',    
        methods: {    
            handleChildClick: function () {    
                //alert('childClick');    
                //this.$emit('click1')    
            }    
        }    
    });    
    // 方式1,通过$emit()进行传递    
    // 方式2, 使用原生的click    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
        },    
        methods: {    
            handleClick: function () {    
                alert('click');    
            },    
            handleClick2: function () {    
                alert('click2');    
            }    
        }    
    })    
</script>  

2.非父子组件传值

使用场景:兄弟节点、非兄弟节点
使用总线机制/发布订阅模式/观察者模式解决该问题

<body>    
    <div id="app">    
        <child content="Dell" ></child>    
        <child content="Lee"></child>    
    </div>    
</body>    
<script>    
    // 总线机制/发布订阅模式/观察者模式    
    Vue.prototype.bus = new Vue(); // 创建的每一个vue实例上都带有bus属性

    Vue.component('child', {    
        props: {    
            content: String,    
        },    
        template:'<div @click="handleClick">{{Content}}</div>',    
        methods: {    
            handleClick: function () {    
                // 向外传递事件    
                this.bus.$emit('change', this.Content)    
            }    
        },    
        data: function(){    
            return {    
                Content: this.content,    
            }    
        },    
        mounted: function () {    
            var this_ = this;    
            // 接受事件    
            this.bus.$on('change', function (value) {    
                this_.Content=value;    
            })    
        }    
    });    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
        }    
    })    
</script>  

3.插槽(slot)

插槽

<body>  
    <div id="app">  
        <child><p>dell</p></child>  
        <child><p>dell</p><p slot="footer">45555</p></child>  
    </div>  
</body>  
<script>  
    // 父组件向子组件传递dom元素  
    // slot可以指定默认值  
    // slot可以指定名字  
    Vue.component('child', {  
        props: ['content'],  
        template: '<div>' +  
            '<p>hello</p>' +  
            '<slot></slot><slot name="footer"></slot>' +  
            '</div>',  
    });  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
        }  
    })  
</script>  

4.作用域插槽

<body>  
    <div id="app">  
        <child>  
            <template slot-scope="props">  
                <li>{{props.item}}</li>  
            </template>  
        </child>  
    </div>  
</body>  
<script>  
    // 使用场景,当子组件需要循环,或者数据从外部传递时  
    Vue.component('child', {  
        data: function () {  
            return {  
                list: [1, 2, 3, 4]  
            }  
        },  
        template: '<div><ul><slot v-for="item in list" :item="item"></slot></ul></div>'  
    });  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
        }  
    })  
</script>  

 

5.动态组件与v-once指令

<body>

<div id="root">  
    动态组件  
    根据is内数据变化自动加载组件  
    <component :is="show"></component>  


<!--    <child-one v-if="show === 'child-one'"></child-one>-->  
<!--    <child-two v-if="show === 'child-two'"></child-two>-->  
    <button @click="handleBtnClick">change</button>  
</div>  
<script>  
    Vue.component('child-one', {  
        // v-once会将数据加载到内存中,提高性能  
        template: '<div v-once>child-one</div>'  
    });  
    Vue.component('child-two', {  
        template: '<div v-once>child-two</div>'  
    });  

    var vm = new Vue({  
        el: '#root',  
        data: {  
            show: 'child-one',  
        },  
        methods:{  
            handleBtnClick: function () {  
                this.show = (this.show === 'child-one' ? 'child-two': 'child-one');  
            }  
        }  
    })  
</script>  

标签:Vue

文章评论

评论列表

已有0条评论