From 06e3ba3cba4c31befcef68591c8d4b23b74b9e4f Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Wed, 17 Apr 2019 11:18:21 -0500
Subject: [PATCH] Importing components with @using directives (#11985)

---
 aspnetcore/blazor/components.md | 39 ++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/aspnetcore/blazor/components.md b/aspnetcore/blazor/components.md
index 911884e393..6442bda064 100644
--- a/aspnetcore/blazor/components.md
+++ b/aspnetcore/blazor/components.md
@@ -5,7 +5,7 @@ description: Learn how to create and use Razor Components, including how to bind
 monikerRange: '>= aspnetcore-3.0'
 ms.author: riande
 ms.custom: mvc
-ms.date: 04/15/2019
+ms.date: 04/17/2019
 uid: blazor/components
 ---
 # Create and use Razor Components
@@ -521,6 +521,40 @@ The [sample app](https://github.com/aspnet/Docs/tree/master/aspnetcore/blazor/co
 
 The base class should derive from `ComponentBase`.
 
+## Import components
+
+The namespace of a component authored with Razor is based on:
+
+* The project's `RootNamespace`.
+* The path from the project root to the component. For example, `ComponentsSample/Pages/Index.razor` is in the namespace `ComponentsSample.Pages`. Components follow C# name binding rules. In the case of *Index.razor*, all components in the same folder, *Pages*, and the parent folder, *ComponentsSample*, are in scope.
+
+Components defined in a different namespace can be brought into scope using Razor's [\@using](xref:mvc/views/razor#using) directive.
+
+If another component, `NavMenu.razor`, exists in the folder `ComponentsSample/Shared/`, the component can be used in `Index.razor` with the following `@using` statement:
+
+```cshtml
+@using ComponentsSample.Shared
+
+This is the Index page.
+
+<NavMenu></NavMenu>
+```
+
+Components can also be referenced using their fully qualified names, which removes the need for the [\@using](xref:mvc/views/razor#using) directive:
+
+```cshtml
+This is the Index page.
+
+<ComponentsSample.Shared.NavMenu></ComponentsSample.Shared.NavMenu>
+```
+
+> [!NOTE]
+> The `global::` qualification isn't supported.
+>
+> Importing components with aliased `using` statements (for example, `@using Foo = Bar`) isn't supported.
+>
+> Partially qualified names aren't supported. For example, adding `@using ComponentsSample` and referencing `NavMenu.razor` with `<Shared.NavMenu></Shared.NavMenu>` isn't supported.
+
 ## Razor support
 
 **Razor directives**
@@ -535,8 +569,7 @@ Razor directives are shown in the following table.
 | [\@inject](xref:mvc/views/razor#section-4) | Enables service injection from the [service container](xref:fundamentals/dependency-injection). For more information, see [Dependency injection into views](xref:mvc/views/dependency-injection). |
 | `@layout` | Specifies a layout component. Layout components are used to avoid code duplication and inconsistency. |
 | [\@page](xref:razor-pages/index#razor-pages) | Specifies that the component should handle requests directly. The `@page` directive can be specified with a route and optional parameters. Unlike Razor Pages, the `@page` directive doesn't need to be the first directive at the top of the file. For more information, see [Routing](xref:blazor/routing). |
-| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. |
-| [\@addTagHelper](xref:mvc/views/razor#tag-helpers) | Use `@addTagHelper` to use a component in a different assembly than the app's assembly. |
+| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. This also brings all the components defined in that namespace into scope. |
 
 **Conditional attributes**