What is vue component

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.

What are components?

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.

Using Vue components

Let’s talk about our directory first

1. Create our component B.vue

##Similarly, Create a new hello_word.vue as the parent

hello_word.vue // import showB from './B.vue' Introduce components

Registered component

 components:{
          showB,        
        },
<showB /> //使用组件

Note: Define component names in camel case, such as: Use PascalCase Use 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:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

Parent component:

Introduce @msg='msg' in DOM

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }

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!