CodeQL is a static analysis tool that can scan your code for vulnerabilities.
اشتراکها
در قسمتهای قبلی( ^ و ^) نحوهی ارتباط بین کامپوننتها در Vue.js بررسی و مزایا و معایب آنها بیان شد. روش دیگری هم برای ارسال اطلاعات از کامپوننتِ Parent به فرزندانش وجود دارد که با استفاده از Dependency Injection یا به اختصار DI مقدور میباشد و در ورژن +2.2 معرفی شد که نحوهی ارتباط بین کامپوننتِ Parent و فرزندانش را آسان نمود. پیشتر برای ارتباط از Parent به Child، از Props استفاده میکردیم، ولی اگر قرار بود در چند سطح این ارتباط عمیق باشد، باز هم مدیریت کردن Props مشکل و سخت بود. اکنون با استفاده از provide و inject قادر خواهیم بود تا آبجکت، فانکشن و یا دیتایِ یک کامپوننتِ Parent را در فرزندانش فراخوانی و استفاده کنیم. اگر در حالت عادی نیاز بود تا در دو سطح، یا بیشتر (مانند تصویر زیر) دیتایِ کامپوننت پدر را به فرزند، نوه و ... انتقال دهیم، میبایست اطلاعات را بصورت Props به هر Level انتقال دهیم.
و در کامپوننتهای فرزند به شکل زیر میتوانیم مقدار foo را دریافت کنیم:
روش جاری شباهت زیادی به استفاده از Context در React دارد:
Context provides a way to pass data through the component tree without having to pass props down manually at every level
جهت به اشتراک گذاری دیتا یا تابعی در کامپوننت Parent با Children، به شکل زیر عمل میکنیم. در اینجا با استفاده از provide، دیتای foo به اشتراک گذاشته شدهاست:
// parent component providing 'foo' var Provider = { provide: { foo: 'bar' }, // ... }
// child component injecting 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }
میتوانیم مقدار پیش فرض دیتایِ ارسالی از کامپوننت Parent را در قسمت data و props در کامپوننت Child دریافت نماییم:
Using an injected value as the default for a prop //دریافت میکنیم props در قسمت child را در کامپوننت foo مقدار const Child = { inject: ['foo'], props: { bar: { default () { return this.foo } } } } Using an injected value as data entry //دریافت میکنیم data در قسمت child را در کامپوننت foo مقدار const Child = { inject: ['foo'], data () { return { bar: this.foo } } }
نکته: در این روش در صورتیکه دیتایِ به اشتراک گذاشته شده در کامپوننتِ Parent تغییر کند، مقدار آن در کامپوننت Child تغییری نخواهد کرد و مانند روشهای قبلی (^ و ^) نیست و نیاز به نوشتن کدی برای تعامل داشتن و بهروز رسانی مقادیر، در کامپوننت Child میباشد.
کد زیر را در نظر بگیرید؛ با زدن دکمهی Increment counter مقدار counter در کامپوننتِParent تغییر میکند، ولی در کامپوننت Child، مقدار counter_in_child تغییری حاصل نمیکند.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Dependency injection</title> </head> <body> <div id="app"> <button @click="counter++">Increment counter</button> <h2>Parent</h2> <p>{{counter}}</p> <div> <h3>Child</h3> <child></child> </div> </div> <script> const Child = { inject: ['counter_in_child'], template: `<div>Counter Child is:{{ counter_in_child }}</div>` }; new Vue ({ el: "#app", components: { Child }, provide() { return { counter_in_child: this.counter }; }, data() { return { counter: 0 }; } }); </script> </body> </html>
برای اینکه بتوان تغییرات ایجاد شدهی بر روی دیتا را در کامپوننتِChild، مشاهده کرد، نیاز داریم کد زیر را در قسمت provide به ازای آن دیتا اضافه کنیم:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Dependency injection</title> </head> <body> <div id="app"> <button @click="counter++">Increment counter</button> <h2>Parent</h2> <p>{{counter}}</p> <div> <h3>Child</h3> <child></child> </div> </div> <script> const Child = { inject: ['counter_in_child'], template: `<div>Counter Child is:{{ counter_in_child.counter }}</div>` }; new Vue ({ el: "#app", components: { Child }, provide() { const counter_in_child={}; Object.defineProperty(counter_in_child,'counter',{ enumerable:true, get:()=>this.counter }) return { counter_in_child }; }, data() { return { counter: 0 }; } }); </script> </body> </html>
مثالی از نحوه به اشتراک گذاری متد بین Parent و Child.
نتیجه گیری:
A) استفاده از این روش مرسوم نیست و بیشتر برای ساخت پلاگین در Vuejs مورد استفاده قرار میگیرد:
provide
and inject
are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code C) این روش برای ارتباط Sibling Component مناسب نیست.
نظرات مطالب
پیاده سازی Option یا Maybe در #C
نوعهای ارجاعی نال نپذیر بحث دیگری هستند. فعلا پیاده سازی مشابهی از آن به TypeScript 2.0 اضافه شدهاست: TypeScript 2.0: Non-Nullable Types
اشتراکها
آنالیز رنگ Apple App Store
- Custom Project Template Not Found
- msvsmon.exe crashes when hitting breakpoint in native C++ code
- Search for a folder in solution explorer, then click home or the X in the search box. The view is reset.
- External Tools argument current line is always zero.
- Can't create v3 Function project.
- Access violation reading location 0xFFFFFFFFFFFFFFFF. after updating to VS 2019 Update 16.4.3
- Cannot create function app under 16.4
- MSVC2019 generates AVX-512 instruction in AVX/AVX2 mode
- Bad code generation with rsqrtss (register clobber)
- Visual Studio 2019 Debugger crashes when viewing FastLink callstack.
- C#: Fixed a crash when an attribute constructor is decorated with itself and Nullable Reference Types is enabled.
- Fixed an optimization-analysis bug where we lose track of alias information for arrays of indeterminate length (declared as extern int a[]) when we unroll loops, leading to possible incorrect dead-store removal.
اشتراکها