Vue v2.4\u65b0\u589e$attrs\u00a0$listeners<\/p>\n
\u76f4\u63a5\u4e0a\u6848\u4f8b\uff1a<\/p>\n
html\uff1a<\/p>\n
<div id=\"app\">\r\n <child1\r\n :p-child1=\"child1\"\r\n :p-child2=\"child2\"\r\n :p-child-attrs=\"1231\"\r\n v-on:test1=\"onTest1\"\r\n v-on:test2=\"onTest2\">\r\n <\/child1>\r\n<\/div><\/pre>\n<\/p>\n
js\uff1a<\/p>\n
Vue.component(\"Child1\", {\r\n inheritAttrs: true,\r\n props: [\"pChild1\"],\r\n template: `\r\n <div class=\"child-1\">\r\n <p>in child1:<\/p>\r\n <p>props: {{pChild1}}<\/p>\r\n <p>$attrs: {{this.$attrs}}<\/p> \/\/\u9664\u4e86class\u3001style\u548cprops\uff0c\u8fd9\u91cc\u90fd\u80fd\u83b7\u53d6\u5230\u7236\u7ec4\u4ef6\u4f20\u6765\u7684\u503c{ \"p-child2\": \"pChild2\u7684\u503c\", \"p-child-attrs\": 1231 }\r\n <hr>\r\n <child2 v-bind=\"$attrs\" v-on=\"$listeners\"><\/child2><\/div>`,\r\n mounted: function() {\r\n this.$emit(\"test1\");\r\n }\r\n});\r\n\r\nVue.component(\"Child2\", {\r\n inheritAttrs: true,\r\n props: [\"pChild2\"],\r\n template: `\r\n <div class=\"child-2\">\r\n <p>in child->child2:<\/p>\r\n <p>props: {{pChild2}}<\/p>\r\n <p>$attrs: {{this.$attrs}}<\/p>\r\n <button @click=\"$emit('test2','\u6309\u94ae\u70b9\u51fb')\">\u89e6\u53d1\u4e8b\u4ef6<\/button>\r\n <hr> <\/div>`,\r\n mounted: function() {\r\n this.$emit(\"test2\");\r\n }\r\n});\r\n\r\nconst app = new Vue({\r\n el: \"#app\",\r\n data: {\r\n child1: \"pChild1\u7684\u503c\",\r\n child2: \"pChild2\u7684\u503c\"\r\n },\r\n methods: {\r\n onTest1() {\r\n console.log(\"test1 running...\");\r\n },\r\n onTest2(value) {\r\n console.log(\"test2 running...\" + value);\r\n }\r\n }\r\n});<\/pre>\n