关于调用组件里的元素 $listeners

最新推荐文章于 2024-09-27 15:27:45 发布

愤怒的佛手瓜

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量558

点赞数

分类专栏： js 文章标签： vue.js javascript electron

本文链接：https://blog.csdn.net/h666000/article/details/121534280

版权

js 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文介绍了在Vue中如何进行组件间的通信，特别是从子组件向父组件传递事件。通过在子组件中定义计算属性来监听并处理焦点事件，并使用`$emit`触发自定义'focus'事件，将信息传递给父组件。父组件通过`v-on`监听并响应这个事件，实现数据的交互。

摘要由CSDN通过智能技术生成

关于调用组件里的元素

调用根组件直接在添加.native

<base-input v-on:focus.native="onFocus"></base-input>

调用组件里的特定元素:

// 子组件
Vue.component('component-input',{
        template: `
            <div><span>你好</span><input type="text" v-on="memefocus"></div>
        `,
        computed: {
            memefocus(){
                var vm = this;
                return Object.assign({},this.$listeners,{
                    focus:function (){
                        vm.$emit('focus','哈哈哈你好呀')
                    }
                })
            },
        }
    })

//父组件
<component-input @focus="modehzs"></component-input>
methids:{
     modehzs(env){
          console.log(env)  //打印“哈哈哈你好呀”
     }
}

在这里插入图片描述

/** 总代码*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <component-input @focus="modehzs"></component-input>
</div>
</body>
<script>

    Vue.component('component-input',{
        template: `
            <div><span>你好</span><input type="text" v-on="memefocus"></div>
        `,
        computed: {
            memefocus(){
                var vm = this;
                return Object.assign({},this.$listeners,{
                    focus:function (){
                        vm.$emit('focus','哈哈哈你好呀')
                    }
                })
            },
        }
    })
    var app = new Vue({
        el: '#app',
        data: () => {
            return {
                hzs: new Date().toLocaleString(),
                groceryList: [
                    {id: 0, text: '蔬菜'},
                    {id: 1, text: '奶酪'},
                    {id: 2, text: '随便其它什么人吃的东西'}
                ],
                'make': '<p>this aa</p>',
                'text': '',
            }
        },
        created() {
        },
        computed:{
        },
        methods:{
            modehzs(env){
                console.log(env)
            },
        },

    })
</script>
</html>