Vue:$emit、$on、directive、Vue.extent和Vue.use

Vue的部分进阶知识。
165阅读 · 0评论 · 2020-8-29 23:36发布

$emit和$on用法

  • $on用于监听一个事件,可以指定监听到事件后的处理逻辑。
  • $emit用于子组件中直接调用父组件的事件,可以传递参数。

代码示例

<div id="example">
    <button v-on:click="boost">点击触发</button>
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        created(){
            this.$on('my_events',this.handleEvents)
        },
        methods:{
            handleEvents(e){
                console.log(this.say,e)
            },
            boost(){
                this.$emit('my_events','params')
            }
        },
        data: {
            say:"hello world"
        }
    })
</script>
  • 事件绑定多个方法。一个事件可以绑定多个处理方法,执行顺序是先定义先执行。
created(){
    this.$on('my_events',this.handleEvents)
    this.$on('my_events',this.handleEvents2)
},
  • 多个事件绑定一个方法。使用$on时,可以传入一个事件数组,绑定至同一个处理方法。
<div id="example">
    <button v-on:click="boost">点击触发</button>
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        created(){
            this.$on(['my_events','my_events2'],this.handleEvents)
        },
        methods:{
            handleEvents(e){
                console.log(this.say,e)
            },
            boost(){
                this.$emit('my_events','params')
            }
        },
        data: {
            say:"hello world"
        }
    })
</script>

directive用法

代码示例

<div id="example" v-demo="isLoading">
    {{say}}
    <br>
    <button v-on:click="boost">点击触发</button>
</div>

<script src="./vue.js"></script>
<script>
    Vue.directive('demo',{
        update(el, binding, vnode){
            console.log(binding)
            if (binding.value){
                const div = document.createElement('div')
                div.innerText = '加载中...'
                div.setAttribute('id','loading')
                div.style.position = 'fixed'
                div.style.left = 0
                div.style.top = 0
                div.style.width = '100%'
                div.style.height = '100%'
                div.style.display = 'flex'
                div.style.justifyContent = 'center'
                div.style.alignItems = 'center'
                div.style.color = 'white'
                div.style.background = 'rgba(0,0,0,.7)'
                document.body.append(div)
            }else{
                document.body.removeChild(document.getElementById('loading'))
            }
        }
    })
    var vm = new Vue({
        el: '#example',
        methods:{
            boost(){
                this.isLoading=true
                setTimeout(() => {
                    this.say="good bye"
                    this.isLoading=false
                },1000)
            }
        },
        data: {
            say:"hello world",
            isLoading:false
        }
    })
</script>

Vue.extent

  • 主要用于生成组件的构造函数。
<div id="example">
    <todo-list
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:title="post.title"
    >
    </todo-list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const comp = Vue.extend({
      props: ['title'],
      template: `<h3>{{ title }}</h3>`
    })
    Vue.component('todo-list', comp)
    var data = {
        posts: [
          { id: 1, title: 'My journey with Vue' },
          { id: 2, title: 'Blogging with Vue' },
          { id: 3, title: 'Why Vue is so fun' }
        ]
    }

    var vm = new Vue({
        el: '#example',
        data: data
    })
</script>
  • Vue.extent进阶用法(常用):通过extent实现可以调用的加载页面。
<style>
    #loading-wrapper{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: cneter;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        color: #fff;
    }
</style>
<div id="example">
    <button @click="showLoading">{{msg}}</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const LoadingComponent = Vue.extend({
        template:`<div id="loading-wrapper">{{tips}}</div>`,
        props:{
            'tips':{
                type:String,
                default:'default loading...'
            }
        }
    })

    function Loading(msg){
        const div = document.createElement('div')
        div.setAttribute('id','loading-wrapper')
        document.body.append(div)
        new LoadingComponent({
            props:{
                tips: {
                    type:String,
                    default:msg
                }
            }
        }).$mount('#loading-wrapper')
        return () => {
            document.body.removeChild(document.getElementById('loading-wrapper'))
        }
    }
    Vue.prototype.$loading = Loading

    var vm = new Vue({
        el: '#example',
        data: {
            msg:"点我加载loading"
        },
        methods:{
            showLoading(){
                const hide = this.$loading('全局加载等待')
                setTimeout(()=>{
                    hide()
                },2000)
                this.msg = "已经loading过了"
            }
        }
    })
</script>

Vue.use

  • 主要用于加载vue插件。
  • 例如将Vue.extent实现的功能做成插件,然后通过Vue.use加载。(插件可以放在另外的文件中,通过模块化方法引入)
<style>
    #loading-wrapper{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: cneter;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        color: #fff;
    }
</style>
<div id="example">
    <button @click="showLoading">{{msg}}</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const loadinPlugin = {
        install: function(vm){
            const LoadingComponent = vm.extend({
                template:`<div id="loading-wrapper">{{tips}}</div>`,
                props:{
                    'tips':{
                        type:String,
                        default:'default loading...'
                    }
                }
            })

            function Loading(msg){
                const div = document.createElement('div')
                div.setAttribute('id','loading-wrapper')
                document.body.append(div)
                new LoadingComponent({
                    props:{
                        tips: {
                            type:String,
                            default:msg
                        }
                    }
                }).$mount('#loading-wrapper')
                return () => {
                    document.body.removeChild(document.getElementById('loading-wrapper'))
                }
            }
            vm.prototype.$loading = Loading
        }
    }

    Vue.use(loadinPlugin)
    var vm = new Vue({
        el: '#example',
        data: {
            msg:"点我加载loading"
        },
        methods:{
            showLoading(){
                const hide = this.$loading('全局加载等待')
                setTimeout(()=>{
                    hide()
                },2000)
                this.msg = "已经loading过了"
            }
        }
    })
</script>

共有0 条评论

暂无评论