In vue, a component is a reusable Vue instance. It has a unique component name. It can extend HTML elements and use the component name as a custom HTML tag. Components can greatly improve code reuse.
The operating environment of this tutorial: Windows 7 system, vue version 2.9.6, DELL G3 computer.
Component is an important concept in Vue. It is a reusable Vue instance. It has a unique component name. It can extend HTML elements and use the component name as customized HTML. Label. Because components are reusable Vue instances, they receive the same options as new Vue(), such as data, computed, watch, methods, and life cycle hooks. The only exceptions are root-instance-specific options like el.
Extract some common modules and write them into separate tool components or pages, which can be directly introduced into the required pages. Then we can extract it as a component for reuse.
For example, if multiple pages use the same components, they can be made into components, which improves the code reuse rate.
Let’s talk about our directory first
1. Create our component B.vue
##Similarly,Create a new hello_word.vue as the parent
Then you will see the result like this Key points: Introduce the B.vue module intohello_word.vue // import showB from './B.vue'Introduce components
Custom module name of B file showBRegistered component
components:{ showB, },//使用组件
Note:Define component names in camel case, such as:Use PascalCaseUse kebab-case
Start getting to the main topic props
The parent component passes the value to the child component(The parent component binds data such as: value="It's time to work ", the child component obtains it through props)The props option of the child component can receive data from the parent component. That's right, it can only be received. Props are one-way bound, that is, they can only be passed from the parent component to the child component, not the other way around.
Usage is as follows:
##. The result is
The child component passes the value to the parent componentIn the child component:
回复父组件
chuanzhi() { this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去 }
Parent component:
Introduce @msg='msg' in DOM
msg(val){ console.log(val,'val') }
Receive through the method
Run, click to reply to the parent component
Print results:
For more programming-related knowledge, please visit:Programming Learning! !
The above is the detailed content of What is vue component. For more information, please follow other related articles on the PHP Chinese website!