vue$attrs和$listeners的使用
Posted web半晨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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、相关文章
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;
);
2.3、相关文章
3、完整代码
以上是关于vue$attrs和$listeners的使用的主要内容,如果未能解决你的问题,请参考以下文章