vue $attrs、$listeners使用

Posted 2023-03-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue $attrs、$listeners使用相关的知识，希望对你有一定的参考价值。

参考技术A

父组件调用子组件时，传递除了使用prop接受的以外属性 (class 和 style 除外)，都可以使用$attrs获取。
若要多层级组件使用 $attrs，则需要在中间子组件使用 v-bind="$attrs" ，才可以被访问，否则访问$attrs为空对象。

与$attrs类似，是对父组件on事件监听但收集，中间子组件使用v-on="$listeners"可以向该组件内的子组件传递监听器。

在vue3.0中 $listeners被移除!!!

所以，在vue3中使用$attrs即可实现属性和事件监听器的传递。

vue$attrs和$listeners的使用

1、$attrs

1.1、html代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_$attrs的使用</title>
    <style>
        .title 
            font-weight: 600;
            margin-right: 2em;
        
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span class="title">A组件</span>
        </div>

        <b-component row="row"></b-component>
    </div>

    <template id="b-component">
        <div>
            <div>
                <span class="title">B组件</span>
                <span>B组件中不需要定义props</span>
            </div>
            <c-component v-bind="$attrs"></c-component>
        </div>
    </template>

    <template id="c-component">
        <div>
            <div>
                <span class="title">C组件</span>
                <span>A组件传过来的值：row</span>
            </div>
        </div>
    </template>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>

1.2、JavaScript代码

// 方式一
// 注意：BC组件定义的顺序不能颠倒
// let CComponent = 
//     name: 'CComponent',
//     template: '#c-component',
// , BComponent = 
//     name: 'BComponent',
//     template: '#b-component',
//     components: 
//         CComponent
//     ,
// ;

// 方式二
let BComponent = 
    name: 'BComponent',
    template: '#b-component',
;
Vue.component('CComponent', 
    name: "CComponent",
    template: '#c-component',
    props: 
        row: 
            type: String,
            dedault: () => ''
        
    
);

new Vue(
    el: '#app',
    components: 
        BComponent
    ,
    data: 
);

1.3、相关文章

CSDN-vue$attrs的使用

2、$listeners

2.1、html代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_$listeners的使用</title>
    <style>
        .title 
            font-weight: 600;
            margin-right: 2em;
        
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span class="title">A组件</span>
            <span>C组件传过来的值：row</span>
        </div>

        <!-- childinfo 不区分大小写 -->
        <b-component @childInfo="getInfo"></b-component>
    </div>

    <template id="b-component">
        <div>
            <div>
                <span class="title">B组件</span>
                <span>B组件中不需要定义$emit</span>
            </div>
            <c-component v-on="$listeners"></c-component>
        </div>
    </template>

    <template id="c-component">
        <div>
            <div>
                <span class="title">C组件</span>
            </div>
        </div>
    </template>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index_$listeners.js"></script>
</body>

2.2、JavaScript代码

let BComponent = 
    name: 'BComponent',
    template: '#b-component',
;
Vue.component('CComponent', 
    name: "CComponent",
    template: '#c-component',
    mounted() 
        // childinfo 不区分大小写
        // 如果这里的i写为I
        // 则发出告警
        // 且不能触发getInfo函数
        this.$emit("childinfo", "row");
    
);

new Vue(
    el: '#app',
    components: 
        BComponent
    ,
    data: 
        row: ""
    ,

    methods: 
        getInfo: function (row) 
            this.row = row;
        
    
);