This time I will bring you the method of using Vue.js components, what are the precautions when using Vue.js components, the following is a practical case, let's take a look.
1. All Vue components are also Vue instances, divided into global components and local components. The registration method is as follows.
b. The data in the component instance must be a function, otherwise a reference to the same object will be returned for each component instance
2. Use of parent-child component combination
a. Parent component passes data to child component
1) In the child component, the expected data is declared by props.
2) It is a one-way data flow, and subcomponents cannot directly modify props.
3) If you want to set prop type verification, you cannot use a string array and should define: Set this attribute="true" in .
b. Child component triggers parent component event
1) Use
$on(eventName)
to listen for events and $emit(eventName,optionalPayload) trigger event. 2) Combined with the defined empty instance, communication between non-parent and child components can also be allowed.
c. Parent-child component data combination - using slot
1) Set in the child component, the parent component can distribute content to the default slot or specify slot="slotName" .
2) Set slot-scope="props" in the parent component to obtain the attributes of the slot tag of the child component.
3) It should be noted that the content of the parent component template is compiled in the parent component scope; the content of the child component template is compiled in the child component scope.
3. Others
a. Through v-bind:is = "componentObject", components can be switched dynamically. To cache the cut-out component, add a parent element to it.
b. Set ref="xx" in the child component, and the child component can be operated by child = vm.$refs.xx. -- Just an emergency measure.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use JavaScript strings
How to implement two-way data binding in WeChat applet
The above is the detailed content of How to use Vue.js components. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn