Vue is a popular JavaScript framework. Its component development can help us improve the degree of modularity when developing complex applications and improve the maintainability and scalability of the code. In Vue, data transfer between components is a very common requirement, and the most common scenario is data transfer between parent and child components. In order to implement this kind of data transfer in Vue, we need to understand the implementation method of value transfer between parent and child components.
In Vue components, a parent component can have multiple child components at the same time. The parent component can pass data to the child components. These data can be the data of the parent component or the return of the function of the parent component calling the child component. value. Specifically, in Vue, there are several ways to implement component parent-child value transfer:
Sample code:
Parent component:
<template> <div> <child-component :msg="helloWorld"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { helloWorld: 'Hello World!' } }, components: { ChildComponent } } </script>
Child component:
<template> <div> {{msg}} </div> </template> <script> export default { props: { msg: String } } </script>
In this example, we declared in the child component A props attribute, its name is msg and its type is String. When using a child component in a parent component, we use the v-bind directive to bind the helloWorld attribute in the parent component to the msg attribute of the child component.
Sample code:
Parent component:
<template> <div> <child-component @message-sent="showMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { methods: { showMessage(msg) { console.log(msg) } }, components: { ChildComponent } } </script>
Child component:
<template> <div> <button @click="sendMessage">Click Me</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit('message-sent', 'Hello World!') } } } </script>
In this example, we add to the child component A button. When the button is clicked, the child component calls the sendMessage function, triggers a custom event named message-sent, and passes the parameter 'Hello World!' to the parent component.
Sample code:
Parent component:
<template> <div> <button @click="showMessage">Click Me</button> <child-component ref="child"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { methods: { showMessage() { console.log(this.$refs.child.message) } }, components: { ChildComponent } } </script>
Child component:
<template> <div> {{message}} </div> </template> <script> export default { data() { return { message: 'Hello World!' } } } </script>
In this example, we define in the child component A data attribute message, and the instance of the child component is obtained through the ref attribute in the parent component. When the button is clicked, the parent component obtains the instance of the child component through this.$refs.child, and then directly accesses the message property on it.
Summary:
The above are some common ways to implement component parent-child value transfer in Vue. Among them, Props is the most commonly used method of transmitting data. It can make the data transfer type between components clear and has better readability and maintainability; while the method of transmitting data to the parent component through the $emit event is applicable It is suitable for scenarios where operations or data need to be performed within sub-components but cannot be achieved through props. The method of obtaining sub-component instances through ref attributes is suitable for situations where the parent component needs to directly operate sub-component data or functions.
The above is the detailed content of Implementation method of component parent-child value transfer function in Vue document. For more information, please follow other related articles on the PHP Chinese website!