Please enable JavaScript.
Coggle requires JavaScript to display documents.
03. OPTIMIZING AND USING COMPONENTS (How to use props and slots with…
03. OPTIMIZING AND USING COMPONENTS
Optimizing our Vue.js code by reducing the repetition, and logically organizing our code
v-on is a new Vue binding that we've not encountered before. It allows you to bind actions from elements to Vue methods. For example, v-on:click is one that is used the most commonly - which allows you to bind a click function to the element
Where v-bind can be abbreviated to just a colon, v-on can be shortened to an @ symbol, allowing you to use
click=""
How to create Vue components and use them with Vue
Vue components are registered using the Vue.component(tagName, options) syntax. Each component must have an associated tag name. The Vue.component registration must happen before you initialize your Vue instance. As a minimum, each component should have a template property
You can also specify components on the Vue instance itself. This would be used if you had multiple Vue instances on one site and wished to contain a component to one instance. To do this, create your component as a simple object and assign the tagName within the components object of your Vue instance
Templates must always have a single wrapping element; this is so the custom HTML tag can be replaced with the parent container
There may be some cases where a custom HTML tag won't be parsed and accepted - these cases tend to be in <table>, <ol>, <ul>, and <select> elements. If this is the case, you can use the is="" attribute on a standard HTML element: <ol> <li is="my-component"></li> </ol>
The data object of a component must be a function. This is so that each component has its own self-contained data, rather than getting confused and sharing data between different instances of the same component. The function must still return an object as you would in your Vue app
How to use props and slots with components
Slots are like placeholders and allow you to place content between the opening and closing tags of your component and determine where they are going to display
Viewing the Bootstrap HTML, we can see there is space for a header, body, and footer. We can identify these sections with named slots. This allows us to pass specific content to specific areas of our component
In our app, we can now specify what content goes where by specifying a slot attribute in the HTML. This can either go on a specific tag or a container around several tags. Any HTML without a slot attribute will also default to your unnamed slot
The last thing you can do with slots is specified a default value. For example, you may want to display the buttons in the footer most of the time, but want to have the ability to replace them if desired. With a <slot>, any content placed between the tags will be displayed unless overwritten when specifying the component in your app
Create a template block—Vue gives us the option to use external templates that are defined in the view using the text/x-template syntax and an ID
<script type="text/x-template" id="team-member-template"></script>
As a quick fix, you can use this.$parent to reference data on the parent element—however, this is not recommended and should only be used in extreme circumstances or to quickly pass the data through
Utilizing events to transfer data between components
The problem we face in making the filtering a component is a challenge of transferring filter data between the filtering component and the team-member component. Vue addresses this with custom events. These let you pass (or "emit") data to the parent or other components from the child component
With custom events, you can pass data back up to the parent instances using the $on and $emit functions. For this app, we are going to store the filtering data on the parent Vue instance and update it from the component. The team-member component can then read the data from the Vue instance and filter accordingly
The $emit function takes two parameters: a key and the value. Emit a key of change-filter-field and pass the event.target.value as the data
In order to then pass the data to the changeFilter method on our parent Vue instance, we need to add a new prop to our <filtering> element. This uses v-on and binds to the custom event name. It then has the parent method name as the attribute value
To emit the query field, we are going to use a new Vue key that we have not used before, called watch. The watch function tracks a data property and can run methods based on the output. The other thing it is able to do is to emit events