Communication between Vue child components and parent components (with code)-JS Tutorial-php.cn

1. Environment setup

Download vue-cli:npm install -g vue-cli
Initialization Project:vue init webpack vue-demo
Enter the vue-demo folder:cd vue-demo
Download and install dependencies:npm install
Run the project:npm run dev

2. Parent component passes value to child component

Create a component under the src/components/ folder, Home.vue
Create subcomponents, create a new folder under the src/components/ folder, and create a new component Child.vue in the new folder

Create props in Child.vue, use To receive the value passed by the parent component

Copy after login

Register the Child component in Home.vue, and add the home-child tag in the p tag of the template. Use thev-bindinstruction to bind the tag. Set c. The child component can receive the value passed by the parent component through props.

Copy after login

Result
Communication between Vue child components and parent components (with code)

3. The child component passes the value to the parent component

Bind the click event ChildClick
to the button in the function of the event Use $emit to trigger a custom event and pass a parameter. This parameter is the value that the child component will pass to the parent component.

Copy after login

Listen to the custom event in the home-child tag in the parent component, and add a method ShowChild that responds to the event.

Copy after login

Result:
Communication between Vue child components and parent components (with code)

After clicking the button:
Communication between Vue child components and parent components (with code)

Detailed explanation of communication between vue child component and parent component

The above is the detailed content of Communication between Vue child components and parent components (with code). For more information, please follow other related articles on the PHP Chinese website!