What are vue components? Introduction to Vue components-JS Tutorial-php.cn

What is the vue component? Components are reusable Vue instances. It is essentially an object that contains member attributes such as data, computed, watch, methods, filters, and vue component life cycle hooks. This article will give you a detailed introduction to the content of the vue component.

Let’s take a look at the component structure first:

{ data(){ return { // } }, computed:{ displayName(){ return ''; } }, methods:{ onClickHandler(params){ // do something } } }

Copy after login

Basic knowledge:

data attribute

The data attribute maintains the internal state of a component, and other components are not visible under normal circumstances.

Currently I don’t know how to monitor its changes;

Because the calculated attribute computed and the listening attribute watch can only monitor changes in responsive dependencies, and $refs is not responsive.

Can be passed to child components through props;

Can be passed to parent components through $emit;

Can be passed to this.$refs.ref.$data in mounted Get the internal state of the child component during the life cycle;

The data option of a component must be a function.

data选项有两种定义方式： 一、对象形式： ``` data:{ //引用该组件的地方，共用一个状态的引用，以至于，只要有一处修改了$data中的某一属性值，其它引用该组件的地方也跟随着改变该属性值（其实，不是跟随，本来就是同一个指向）。 } ``` 二、函数形式： ``` data(){ return { //引用该组件的地方，每一个组件都会获得独立的引用，互不干扰。 } } ```

Copy after login

computed attribute, methods attribute, filter

##Difference method computed filter Type Function Data variable Function Purpose Used as event processing function Used as data Used as pipe symbol Scope Intra-organization Intra-organization Intra-organization (local registration), global (global registration) Parameter Can take parameters Without parameters (non-function) With parameters Return value No Requirements must have must have triggered triggered when interacting in its related dependencies It will be re-evaluated only when changes occur Executed when the incoming data changes

Note:

Not all properties in Vue are responsive, for example, $refs cannot monitor its changes;

The main difference in component construction is the

template generation method.

Template definition method

template option

String template

A string composed of HTML tag structure;

Example:

{ template: '简单示例
', props: { level: { type: Number, required: true } } }

Copy after login

The template specified by the id selector

Wrapped with a script tag identified by id HTML fragment;

Example:

 { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } }

Copy after login

render

Use the maximum programming capabilities of JavaScript. This function receives a createElement method as the first parameter Used to create VNode;

createElement receives three parameters: component root node type, component configuration object, child node (official description of component configuration object);

Example:

{ render: function (createElement) { return createElement( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } }

Copy after login

vue single file component

Single file component structurally separates templates, logic, and styles and saves them in the same file.

Copy after login

Plan selection

注意：不论选择哪一种方案，定义模板时，一定要有一个非template标签元素作根DOM，有且仅有一个。

vue组件注册方式

局部注册

以上几种方案定义的组件本质上都是一个对象，获取该对象（假设变量名为TabBar），要求只在另一个组件(假设变量名为App)内使用：

App组件的配置对象：