Component foundation of component programming

1. Definition of components

1. A collection of code and resources to realize local functions in the application ;

2. Each functional module is a component , and each component includes three files : html, css, and js ;

Notice:

1. The component does not have the el attribute . When it was initially defined, it was not determined which container it would serve specifically for. It can be called by other components or vm at any time . "A component is a brick, and it can be moved wherever it is needed."

2. Non-single-file components

That is to say, an html contains multiple components ;

1. Steps to use:

(1) Use extend to create components:

Written in the script tag , you can include the template attribute to add the html structure displayed on the page , for example: template: ` ... ` , for example: const school = Vue.extend({ ... })

data should be written as a function ;

Principle: Because if it is an object type , the data used by all elements when reusing the component is the same , it is easy to cause one element to change the data of the component, and the data of another element will also change accordingly ; but if it is a function type , every When subcomponents are reused, a new function will be created , and data changes will not affect each other.

(2) Registration component

Partial registration : new Vue ({ components:{ ... } })

Global registration : <script> Vue.component('component name', component) </script>

(3) Using components

<school></school>

<div id="root">
        <!-- 第三步：组件的使用 -->
        <school></school>
        <student></student>
</div>

<script>

    //第一步：创建school组件
    const s = Vue.extend({

        //使用template编写html页面
        template:`
            <div>
                <h2>学校名称：{
   
   {schoolName}}</h2>
                <h2>学校地址：{
   
   {address}}</h2>
            </div>
        `,

        //不能够使用el绑定死所服务的元素，组件定义时一定不要设置el，所有的组件最终都会由一个vm管理并决定服务于那一个元素
        // el:'#root',

        //注意：这里的data要写成函数式!
        //因为如果是对象式的话，所有元素复用该组件时使用的数据都是同一个，容易造成一个元素改变组建的数据，另一个元素的数据也随着改变
        //但是如果是函数式，每次组件复用的时候，都会创建一个新的函数，数据的更改也不会互相影响
        data(){
            return{
                schoolName:'尚硅谷',
                address:'北京',
            }
        }
    })

    //第一步：创建student组件
    const student = Vue.extend({
        //可以使用name属性去定义属性在开发者工具中的用于展示的名字
        name:'stu',
        
        //使用template编写html页面
        template:`
            <div>
                <h2>学生姓名：{
   
   {studentName}}</h2>
                <h2>学生年龄：{
   
   {age}}</h2>
            </div>
        `,

        data(){
            return{
                studentName:'李四',
                age:18
            }
        }
    }) 

    //全局注册
    Vue.component('student',student)

    //创建vue
    new Vue({
        el:'#root',
        //第二步：使用组件标签components注册组件（局部注册）
        components:{
            school:s //简写形式，完整写法为：school:school
        }
    })
</script>

2. Matters needing attention

(1) composed of multiple words

Use - connection, the last page display will capitalize the first letter of the word ;

Example: new Vue({ components:{ 'my-school' :s } }), page: MySchool

(Important) In scaffolding : capitalize the first letter of both words ;

例：new Vue({ components:{ MySchool:s } })

(2) A word composed of 

Regardless of whether the first letter is lowercase (school) or uppercase (School) , it will be displayed in the form of the first letter on the page ;

(3) Do not use the tag names (h2, h3) that exist in html as component names ;

(4) Label writing method:

        Double tags: <s></s>

        Single tag: <s/>

(5) Shorthand form for creating components:

Vue.extend can be omitted, and it will be called automatically for us, for example: const school ={ ... }

3. VueComponent

The component is essentially a VueComponent constructor , and is not defined by the programmer, but generated by Vue.extend ;

We only need to write <school> or <school></school>, and vue will help us create a School instance object when parsing , that is: Vue will help us execute new VueComponent(options)

Special Note : Each call to Vue.extend returns a brand new VueComponent ! !

1. Regarding the pointing of this:

(1) In component configuration:

In the data function, methods function, watch function, and computed function, their this is [ VueComponent instance object ]

(2) In new Vue (options) configuration:

In the data function, methods function, watch function, and component function, their this is [ vue instance object ]

2. VueComponent is referred to as vc (also called component instance object )

ps: The vue instance object is referred to as: vm

四、VueCpmponent.prototype.__proto__=vm.prototype

The meaning of existence: Let the componentized instance (vc) also have access to the properties and methods on the vue prototype ;