Detailed description of vue. js data transmission and data distribution slot, detailed description of vue. js distribution slot

Source: Internet
Author: User
Tags emit

Detailed description of vue. js data transmission and data distribution slot, detailed description of vue. js distribution slot

I. data transmission between components

1. The parent component obtains the data of the Child component.

* Child components send their own data to the parent

* Vm. $ emit (event name, data );

* V-on :@

Example usage: When the send button is clicked, "111" is changed to "I am the data of the Child component"

<! DOCTYPE html> 

2. The child component obtains the data of the parent component.

Before calling the sub-component:

<Bbb: m = "data"> </bbb>

Sub-components:

props:['m','myMsg']props:{'m':String,'myMsg':Number        }

<! DOCTYPE html> 

Running result:

Ii. Content Delivery:

Vue. js provides a method to mix the content of the parent component with the template of the Child component itself: slot, used to occupy a location

1. Basic usage

<! DOCTYPE html> 

Running result: the content in the ul tag is not overwritten. If slot is not used, the content in the ul tag will be overwritten.

2. slot name attribute

<! DOCTYPE html> 

Running result:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.