3d Components

[Priamo Gregory]

Thisis very similar to how we nest native HTML elements, but Vue implements its own component model that allows us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components. If you are curious about the relationship between Vue Components and native Web Components, read more here.

The template is inlined as a JavaScript string here, which Vue will compile on the fly. You can also use an ID selector pointing to an element (usually native elements) - Vue will use its content as the template source.

We will be using SFC syntax for the rest of this guide - the concepts around components are the same regardless of whether you are using a build step or not. The Examples section shows component usage in both scenarios.

To use a child component, we need to import it in the parent component. Assuming we placed our counter component inside a file called ButtonCounter.vue, the component will be exposed as the file's default export:

It's also possible to globally register a component, making it available to all components in a given app without having to import it. The pros and cons of global vs. local registration is discussed in the dedicated Component Registration section.

In SFCs, it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.

If you are authoring your templates directly in a DOM (e.g. as the content of a native element), the template will be subject to the browser's native HTML parsing behavior. In such cases, you will need to use kebab-case and explicit closing tags for components:

If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.

Props are custom attributes you can register on a component. To pass a title to our blog post component, we must declare it in the list of props this component accepts, using the props optiondefineProps macro:

When a value is passed to a prop attribute, it becomes a property on that component instance. The value of that property is accessible within the template and on the component's this context, just like any other component property.

defineProps is a compile-time macro that is only available inside and does not need to be explicitly imported. Declared props are automatically exposed to the template. defineProps also returns an object that contains all the props passed to the component, so that we can access them in JavaScript if needed:

As we develop our component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page at its default size.

The button doesn't do anything yet - we want clicking the button to communicate to the parent that it should enlarge the text of all posts. To solve this problem, components provide a custom events system. The parent can choose to listen to any event on the child component instance with v-on or @, just as we would with a native DOM event:

Similar to defineProps, defineEmits is only usable in and doesn't need to be imported. It returns an emit function that is equivalent to the $emit method. It can be used to emit events in the section of a component, where $emit isn't directly accessible:

That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Custom Events.

It should be noted that the limitations discussed below only apply if you are writing your templates directly in the DOM. They do NOT apply if you are using string templates from the following sources:

This is because the HTML spec only allows a few specific elements to omit closing tags, the most common being and . For all other elements, if you omit the closing tag, the native HTML parser will think you never terminated the opening tag. For example, the following snippet:

When used on native HTML elements, the value of is must be prefixed with vue: in order to be interpreted as a Vue component. This is required to avoid confusion with native customized built-in elements.

That's all you need to know about in-DOM template parsing caveats for now - and actually, the end of Vue's Essentials. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the Examples if you haven't already.

The worker node(s) host the Pods that arethe components of the application workload. Thecontrol plane manages the workernodes and the Pods in the cluster. In production environments, the control plane usuallyruns across multiple computers and a cluster usually runs multiple nodes, providingfault-tolerance and high availability.

The control plane's components make global decisions about the cluster (for example, scheduling),as well as detecting and responding to cluster events (for example, starting up a newpod when a Deployment'sreplicas field is unsatisfied).

Control plane components can be run on any machine in the cluster. However,for simplicity, setup scripts typically start all control plane components onthe same machine, and do not run user containers on this machine. SeeCreating Highly Available clusters with kubeadmfor an example control plane setup that runs across multiple machines.

Factors taken into account for scheduling decisions include:individual and collective resource requirements, hardware/software/policyconstraints, affinity and anti-affinity specifications, data locality,inter-workload interference, and deadlines.

The cloud-controller-manager only runs controllers that are specific to your cloud provider.If you are running Kubernetes on your own premises, or in a learning environment inside yourown PC, the cluster does not have a cloud controller manager.

As with the kube-controller-manager, the cloud-controller-manager combines several logicallyindependent control loops into a single binary that you run as a single process. You canscale horizontally (run more than one copy) to improve performance or to help tolerate failures.

The kubelet takes a set of PodSpecs thatare provided through various mechanisms and ensures that the containers described in thosePodSpecs are running and healthy. The kubelet doesn't manage containers which were not created byKubernetes.

Addons use Kubernetes resources (DaemonSet,Deployment, etc)to implement cluster features. Because these are providing cluster-level features, namespaced resourcesfor addons belong within the kube-system namespace.

Network plugins are softwarecomponents that implement the container network interface (CNI) specification. They are responsible forallocating IP addresses to pods and enabling them to communicate with each other within the cluster.

Astro components are the basic building blocks of any Astro project. They are HTML-only templating components with no client-side runtime. You can spot an Astro component by its file extension: .astro.

Astro components are extremely flexible. Often, an Astro component will contain some reusable UI on the page, like a header or a profile card. At other times, an Astro component may contain a smaller snippet of HTML, like a collection of common tags that make SEO easy to work with. Astro components can even contain an entire page layout.

An Astro component is made up of two main parts: the Component Script and the Component Template. Each part performs a different job, but together they provide a framework that is both easy to use and expressive enough to handle whatever you might want to build.

Components are designed to be reusable and composable. You can use components inside of other components to build more and more advanced UI. For example, a Button component could be used to create a ButtonGroup component:

An Astro component can define and accept props. These props then become available to the component template for rendering HTML. Props are available on the Astro.props global in your frontmatter script.

You can also define your props with TypeScript with a Props type interface. Astro will automatically pick up the Props interface in your frontmatter and give type warnings/errors. These props can also be given default values when destructured from Astro.props.

To inject HTML content into a particular slot, use the slot attribute on any child element to specify the name of the slot. All other child elements of the component will be injected into the default (unnamed) .

It is not possible to dynamically generate an Astro slot name, such as within a map function. If this feature is needed within UI framework components, it might be best to generate these dynamic slots within the framework itself.

Astro will pass an empty slot when a slot element exists but has no content to pass. Fallback content cannot be used as a default when an empty slot is passed. Fallback content is only displayed when no slot element can be found.

Components give you the power to create customizable blocks from elements and child elements to maintain a consistent, efficient, and scalable design workflow. You can reuse those blocks across your site and modify them in a single place to avoid individually revising each recurring layout.

Component properties let you define specific element values (e.g., text, rich text, images, video, and visibility) within the main component that can be modified on a component instance. Or, you can connect component properties to a CMS field to pull in data from your CMS Collections. Learn more about defining component properties and modifying values on component instances.

3a8082e126