{"id":396,"date":"2022-04-19T16:05:46","date_gmt":"2022-04-19T08:05:46","guid":{"rendered":"http:\/\/gjweb.top\/?p=396"},"modified":"2022-04-19T16:05:49","modified_gmt":"2022-04-19T08:05:49","slug":"03-context%e5%8f%82%e6%95%b0%e7%9a%84%e7%94%a8%e6%b3%95","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=396","title":{"rendered":"03. context\u53c2\u6570\u7684\u7528\u6cd5"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li>context\u5bf9\u8c61\u4e2d\u6709\u4e09\u4e2a\u53c2\u6570<ul><li>attrs \u7528\u6765\u66ff\u4ee3 props:{} \u6765\u63a5\u53d7\u7236\u7ec4\u4ef6\u7684\u4f20\u503c<\/li><li>slots \u51fd\u6570\u65f6\u6e32\u67d3\u7236\u7ec4\u4ef6\u4e2d\u7684\u69fd\u53e3\u5185\u5bb9<\/li><li>emit \u66ff\u4ee3\u4e4b\u524d\u7684 this.$emit \u8fdb\u884c\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u4f20\u503c<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>\u7528\u6cd5\u5982\u4e0b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*attrs*\/<br>const app = Vue.createApp({<br> &nbsp; &nbsp;template:`<br>        &lt;child app=\"hello\"&gt;parent&lt;\/child&gt;<br>    `<br>});<br>app.component(\"child\",{<br> &nbsp; &nbsp;setup(props,context){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {attrs} = context;<br> &nbsp; &nbsp; &nbsp; &nbsp;console.log(attrs.app) \/\/ hello<br> &nbsp;  }<br>})<br>const vm = app.mount('#root')<br>\/*slots*\/<br>const app = Vue.createApp({<br> &nbsp; &nbsp;template:`<br>        &lt;child&gt;hello worlod&lt;\/child&gt;<br>    `<br>})<br>app.component('child',{<br> &nbsp; &nbsp;setup(props,context){<br>     &nbsp; const {h} = Vue;<br> &nbsp; &nbsp; &nbsp; const {slots} = context;<br> &nbsp; &nbsp; &nbsp; return ()=&gt;h('div',{},slots.default()) <br> &nbsp;  }<br>})<br>\/*emit*\/<br>const app = createApp({<br> &nbsp; &nbsp;template:`<br>        &lt;child @xxx=\"parFun\"&gt;&lt;\/child&gt;<br>    `,<br> &nbsp; &nbsp;methods:{<br> &nbsp; &nbsp; &nbsp; &nbsp;parFun(params){<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(\"\u63a5\u6536\u5b50\u7ec4\u4ef6\u4f20\u503c\",params)<br> &nbsp; &nbsp; &nbsp;  }<br> &nbsp;  }<br>})<br>app.component(\"child\",()=&gt;{<br> &nbsp; &nbsp;template:`<br>        &lt;div @click=\"test\"&gt;child&lt;\/div&gt;<br>    `,<br> &nbsp; &nbsp;setup(props,context){<br> &nbsp; &nbsp; &nbsp; &nbsp;const {attrs,slots,emit} = context;<br> &nbsp; &nbsp; &nbsp; &nbsp;const test = ()=&gt;{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;emit('xxx',666)<br> &nbsp; &nbsp; &nbsp;  }<br> &nbsp; &nbsp; &nbsp; &nbsp;return {test}<br> &nbsp;  }<br>})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>context\u5bf9\u8c61\u4e2d\u6709\u4e09\u4e2a\u53c2\u6570 attrs \u7528\u6765\u66ff\u4ee3 props:{} \u6765\u63a5\u53d7\u7236\u7ec4\u4ef6\u7684\u4f20\u503c slots \u51fd\u6570\u65f6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-396","post","type-post","status-publish","format-standard","hentry","category-composition"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=396"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/396\/revisions\/397"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}