https://yew.rs/assets/js/1b133289.2c4ce98b.js

1"use strict";(globalThis.webpackChunkyew_docs||=[]).push([[1524],{29704(e,n,s){s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"advanced-topics/struct-components/scope","title":"Scope","description":"Component\'s Scope","source":"@site/versioned_docs/version-0.20/advanced-topics/struct-components/scope.mdx","sourceDirName":"advanced-topics/struct-components","slug":"/advanced-topics/struct-components/scope","permalink":"/docs/0.20/advanced-topics/struct-components/scope","draft":false,"unlisted":false,"editUrl":"https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.20/advanced-topics/struct-components/scope.mdx","tags":[],"version":"0.20","frontMatter":{"title":"Scope","description":"Component\'s Scope"},"sidebar":"docs","previous":{"title":"Lifecycle","permalink":"/docs/0.20/advanced-topics/struct-components/lifecycle"},"next":{"title":"Callbacks","permalink":"/docs/0.20/advanced-topics/struct-components/callbacks"}}');var c=s(74848),o=s(28453);const a={title:"Scope",description:"Component's Scope"},i=void 0,d={},l=[{value:"Component&#39;s <code>Scope&lt;_&gt;</code> API",id:"components-scope_-api",level:2},{value:"<code>send_message</code>",id:"send_message",level:3},{value:"<code>send_message_batch</code>",id:"send_message_batch",level:3},{value:"<code>callback</code>",id:"callback",level:3},{value:"<code>batch_callback</code>",id:"batch_callback",level:3}];function r(e){const n={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(n.h2,{id:"components-scope_-api",children:["Component's ",(0,c.jsx)(n.code,{children:"Scope<_>"})," API"]}),"\n",(0,c.jsxs)(n.p,{children:['The component "',(0,c.jsx)(n.code,{children:"Scope"}),'" is the mechanism through which components are able to create callbacks and update themselves\nusing messages. We obtain a reference to this by calling ',(0,c.jsx)(n.code,{children:"link()"})," on the context object passed to the component."]}),"\n",(0,c.jsx)(n.h3,{id:"send_message",children:(0,c.jsx)(n.code,{children:"send_message"})}),"\n",(0,c.jsxs)(n.p,{children:["Sends a message to the component.\nMessages are handled by the ",(0,c.jsx)(n.code,{children:"update"})," method which determines whether the component should re-render."]}),"\n",(0,c.jsx)(n.h3,{id:"send_message_batch",children:(0,c.jsx)(n.code,{children:"send_message_batch"})}),"\n",(0,c.jsxs)(n.p,{children:["Sends multiple messages to the component at the same time.\nThis is similar to ",(0,c.jsx)(n.code,{children:"send_message"})," but if any of the messages cause the ",(0,c.jsx)(n.code,{children:"update"})," method to return ",(0,c.jsx)(n.code,{children:"true"}),",\nthe component will re-render after all messages in the batch have been processed."]}),"\n",(0,c.jsx)(n.p,{children:"If the given vector is empty, this function doesn't do anything."}),"\n",(0,c.jsx)(n.h3,{id:"callback",children:(0,c.jsx)(n.code,{children:"callback"})}),"\n",(0,c.jsxs)(n.p,{children:["Create a callback that will send a message to the component when it is executed.\nUnder the hood, it will call ",(0,c.jsx)(n.code,{children:"send_message"})," with the message returned by the provided closure."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-rust",children:'use yew::{html, Component, Context, Html};\n\nenum Msg {\n    Text(String),\n}\n\nstruct Comp;\n\nimpl Component for Comp {\n\n    type Message = Msg;\n    type Properties = ();\n\n    fn create(_ctx: &Context<Self>) -> Self {\n        Self\n    }\n\n    fn view(&self, ctx: &Context<Self>) -> Html {\n        // Create a callback that accepts some text and sends it\n        // to the component as the `Msg::Text` message variant.\n        // highlight-next-line\n        let cb = ctx.link().callback(|text: String| Msg::Text(text));\n\n        // The previous line is needlessly verbose to make it clearer.\n        // It can be simplified it to this:\n        // highlight-next-line\n        let cb = ctx.link().callback(Msg::Text);

1\n\n        // Will send `Msg::Text("Hello World!")` to the component.\n        // highlight-next-line\n        cb.emit("Hello World!".to_owned());\n\n        html! {\n            // html here\n        }\n    }\n}\n'})}),"\n",(0,c.jsx)(n.h3,{id:"batch_callback",children:(0,c.jsx)(n.code,{children:"batch_callback"})}),"\n",(0,c.jsxs)(n.p,{children:["Create a callback that will send a batch of messages to the component when it is executed.\nThe difference to ",(0,c.jsx)(n.code,{children:"callback"})," is that the closure passed to this method doesn't have to return a message.\nInstead, the closure can return either ",(0,c.jsx)(n.code,{children:"Vec<Msg>"})," or ",(0,c.jsx)(n.code,{children:"Option<Msg>"})," where ",(0,c.jsx)(n.code,{children:"Msg"})," is the component's message type."]}),"\n",(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.code,{children:"Vec<Msg>"})," is treated as a batch of messages and uses ",(0,c.jsx)(n.code,{children:"send_message_batch"})," under the hood."]}),"\n",(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.code,{children:"Option<Msg>"})," calls ",(0,c.jsx)(n.code,{children:"send_message"})," if it is ",(0,c.jsx)(n.code,{children:"Some"}),". If the value is ",(0,c.jsx)(n.code,{children:"None"}),", nothing happens.\nThis can be used in cases where, depending on the situation, an update isn't required."]}),"\n",(0,c.jsxs)(n.p,{children:["This is achieved using the ",(0,c.jsx)(n.code,{children:"SendAsMessage"})," trait which is only implemented for these types.\nYou can implement ",(0,c.jsx)(n.code,{children:"SendAsMessage"})," for your own types which allows you to use them in ",(0,c.jsx)(n.code,{children:"batch_callback"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(r,{...e})}):r(e)}},28453(e,n,s){s.d(n,{R:()=>a,x:()=>i});var t=s(96540);const c={},o=t.createContext(c);function a(e){const n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:a(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);