目录
1、$attrs
1.1、html代码
- 1、$attrs
-
- 1.1、html代码
- 1.2、JavaScript代码
- 1.3、相关文章
- 2、$listeners
-
- 2.1、html代码
- 2.2、JavaScript代码
- 2.3、相关文章
- 3、完整代码
<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的使用 font-weight: 600; margin-right: 2em; } {row}} // 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的使用 font-weight: 600; margin-right: 2em; } {row}} <b-component @childInfo="getInfo"> 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、相关文章
CSDN-vue$listeners用法记录
3、完整代码gitee(码云) - mj01分支 - vue_$attrs_$listeners 文件夹
