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代码
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>
<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() {
this.$emit("childinfo", "row");
}
});
new Vue({
el: '#app',
components: {
BComponent
},
data: {
row: ""
},
methods: {
getInfo: function (row) {
this.row = row;
}
}
});
2.3、相关文章
CSDN-vue$listeners用法记录
3、完整代码
gitee(码云) - mj01分支 - vue_$attrs_$listeners 文件夹
