vue自定义组件-Vue组件传参：Vue非父子组件间的传参

用于解决平级组件或者跨级组件之间的通信,因为如果全部用父子组件通信,有的不是父子组件就很繁琐,所以我们利用一个公共的vue实例订阅和发布事件来达到不是父子组件间的通信

其实就是利用$emit()方法触发自定义事件 和 $on() 监听自定义事件,给自定义事件添加事件处理函数

示例: 修改todoList

    

        
        点击评论
    


    

        

            {{comment}}
            X
        
    


    // 定义一个负责通信的公共vue实例,除了负责组件之间的通信,没有任何实际意义
    let eventBus = new Vue();
    //  组件选项对象
    // 组件一
    let firstComponent = {
        template: `#firstComponent`,
        data(){
            return {
                comment: ''
            }
        },
        methods: {
            handleClick(){
                let comment = this.comment.trim();
                if(!comment)return
                eventBus.$emit("addcomment",comment)
                this.comment = ""
            }
        }
    };
    // 组件二
    let secondComponent = {
        template: `#secondComponent`,
        data(){
            return {
                comments: [] 
            }
        },
        // 创建组件的时候,监听自定义事件
        // 注意函数中的this
        created(){
            eventBus.$on("addcomment", (comment) =>{
                this.comments.push(comment)
            })
        },
        methods:{
            deleteClick(index){
                this.comments.splice(index,1)
            }
        }
    }
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            secondComponent,
            firstComponent,
        }
    })

通过示例我们机会发现,我们不需要每次都将数据传来传去, 变得复杂.

发布/订阅模式很好的帮我们处理了非父子组件间的数据传递.

但是回头在思考一下, 我们需要每次都实例化一个vue来作为我们的总线吗?其实不需要, 如果每次都创建vue实例反而不好,因为帮我们处理发布/订阅模式的总线一个就好vue自定义组件, 那么我们可以如何处理呢,

其实我们可以将这个总线的vue实例绑定为Vue原型上, 这样在每个vue实例上都可以使用这个总线,

修改示例: 将这个用来处理传递数据的的vue实例,绑定到Vue构造函数的原型上

    
    
    


    

        
        点击评论
    


    

        

            {{comment}}
            X
        
    


    // 将作为总线的vue实例绑定到构造函数上
    Vue.prototype.bus = new Vue();
    //  组件选项对象
    // 组件一
    let firstComponent = {
        template: `#firstComponent`,
        data(){
            return {
                comment: ''
            }
        },
        methods: {
            handleClick(){
                let comment = this.comment.trim();
                if(!comment)return
                this.bus.$emit("addcomment",comment)
                this.comment = ""
            }
        }
    };
    // 组件二
    let secondComponent = {
        template: `#secondComponent`,
        data(){
            return {
                comments: [] 
            }
        },
        // 创建组件的时候,监听自定义事件
        // 注意函数中的this
        created(){
            this.bus.$on("addcomment", (comment) =>{
                this.comments.push(comment)
            })
        },
        methods:{
            deleteClick(index){
                this.comments.splice(index,1)
            }
        }
    }
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            secondComponent,
            firstComponent,
        }
    })

除了以上$on监听事件外vue自定义组件, 还有两个处理事件的方法:$once和$off.

$once的行为与$on一样, 只不过是绑定的事件监听器只会执行一次, 在事件第一次触发完毕后会自动解除事件绑定

$off 方法则是用于移出一个事件监听器.

3. ref在组件上使用(利用ref处理父子通信)

之前我们讲过ref在普通的DOM元素上使用,获取的是DOM元素,但是如果ref在组件上使用,获取的是组件的实例,

通过ref,我们就可以实现在父组件中调用子组件的方法

    


    

        
加载中...
    


    const loading = {
        data() {
            return { flag: true }
        },
        template: '#myalert',
        methods: {
            hide() {
                this.flag = false;
            }
        }
    };
    var vm = new Vue({   // 根实例
        el: '#app',
        data: {
        },
        components: {
            loading
        },
        mounted() {
            // console.log(this.$refs.load)
            setTimeout(() => {
                this.$refs.load.hide()
            }, 2000)
        }
    });

admin网站代理

收藏 链接