1. Componentized development idea

1.1. Embodiment of the idea of componentization in reality

  • standard
  • Divide and conquer
  • reuse
  • combination

1.2. The idea of componentization in programming

1.3. Componentized specification: Web Components

  • We want to reuse as much code as possible
  • The way you customize components is not easy (HTML, CSS, JS)
  • Using components multiple times can lead to conflicts

Web Components solves this problem by creating custom elements that encapsulate functionality

Liverpoolfc.tv: developer.mozilla.org/zh-CN/docs/…

Vue partially implements the above specification

  • Components are one of the most powerful features of vue.js
  • Components can extend HTML elements and encapsulate reusable generations

2. Register components

2.1. Global component registration syntax

Once the global component is registered, any VUE instance can be used

Vue.com Ponent (Component name, {data: Component data,template: component template content}) first1The first parameter is the label name2Is an option objectCopy the code
// Register a new component called button-counter
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0}},template: '< button v - on: click = "count++" > click the {{count}}. < / button >'
})
Copy the code

2.2. Component usage

<div id="app">
    <button-counter></button-counter>
</div>
Copy the code
<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
Copy the code

2.3. Precautions for Component Registration

2.3.1. Data must be a function

  • Analyze how functions compare to ordinary objects
  • This function also requires that an object be returned

2.3.2. Component template content must be a single trailing element

Analyze and demonstrate the actual results

2.3.3. Component template contents can be template strings

Template strings require browser support (ES6 syntax)

2.3.4. Component naming

  • Short line mode
Vue.component('my-component', { / *... * / })
Copy the code
  • Hump way
Vue.component('MyComponent', { / *... * / })
Copy the code
  <div id="app"> <! --4Components can be reused multiple times. Since data returns an object, the data in each component is private, i.e. each instance can maintain an independent copy of the returned object.<button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter><! --8, components must be used with a dash --><hello-world></hello-world>
  </div>

<script type="text/javascript">
	//5 If you use a humped name for a component, you can only use a humped name for the component in the string template.
    But in a normal tag template, you must use a dash to use components
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'}},template: '<div>{{msg}}</div>'
    });
    
    
    
    Vue.component('button-counter', {
      // 1. The data value of the component parameter must be a function
      // This function also requires that an object be returned
      data: function(){
        return {
          count: 0}},// The component template must be a single root element
      The content of a component template can be a template string
      template: '
        

          < button@click ="handle"> click {{count}} times  
          # 6 You can use components in a string template in a hump manner 
          
        
 `.methods: {
        handle: function(){
          this.count += 2; }}})var vm = new Vue({
      el: '#app'.data: {}});</script>
Copy the code

2.4. Local component registration

Can only be used in the vUE instance where it is currently registered

var ComponentA = { / *... * / }
var ComponentB = { / *... * / }
var ComponentC = { / *... * / }
new Vue({
    el: '#app'
    components: {
        'component-a': ComponentA,
        'component-b': ComponentB,
        'component-c': ComponentC,
    }
})
Copy the code

2.5. Notice the global without S and the local with S

3. Vue debugging tool

3.1. Installation of debugging tools

  • ① Clone warehouse
  • (2) Install dependency packages
  • (3) building
  • 4 Open the Chrome extension page
  • ⑤ Select developer mode
  • ⑥ To load the decompressed extension, select Shells or Chrome

3.2. Debugging tool usage

4. Data interaction between components

4.1. Parent components pass values to child components

4.1.1. The component internally receives the values passed through props

Vue.com ponent (' menu item', { props: ['title'], template: '<div>{{ title }}</div>'})Copy the code

4.1.2. Parent components pass values to child components via properties

<menu-item title="Data from parent component"></menu-item>
<menu-item :title="title"></menu-item>
Copy the code

4.1.3. Props Property name rules

  • Use the hump form in props and the short bar form in templates
  • String templates do not have this limitation
Vue.com ponent (' menu item', {// in JavaScript is humped props: [' menuTitle'].template: '<div>{{ menuTitle }}</div>'}) <! -- In HTML, it's dashes --><menu-item menu-title="Nihao"></menu-item>
Copy the code

4.1.4. Props property value type

  • Static values can be passed
  • You can also pass dynamic values
  • The dynamic value could be
    • String String
    • The numerical Number
    • Boolean value Boolean
    • An Array of Array
    • Object the Object

4.2. Child components pass values to parent components

4.2.1. Child components pass information to parent components through custom events

<button v-on:click='$emit("enlarge-text") '</button>Copy the code

4.2.2. The parent component listens for events of the child component

<menu-item v-on:enlarge-text='fontSize + = 0.1'></menu-item>
Copy the code

4.2.3. Child components pass information to parent components through custom events

The first argument to $emit() is the custom event name and the second argument is the data to pass

<button v-on:click='$emit (0.1) "enlarge - text","</button>Copy the code

4.2.4. The parent component listens for events of the child component

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
Copy the code

4.3. Value transfer between non-parent and child components

  • Brothers need to use the event center to transfer data between them

    • Var hub = new Vue()

  • $emit(method name, data passed)

  • Mounted (){} Raises the hub.$on() method

  • The destruction event could not pass data after it was destroyed by the hub.$off() method name

4.3.1. Communication between individual event center management components

var eventHub = new Vue()
Copy the code

4.3.2. Listening events and destruction events

eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
Copy the code

4.3.3. Triggering events

EventHub. $emit (' add - todo', id)
Copy the code

5. Component slot

The most important characteristic of component is reusability, and the use of slot can greatly improve the reusability of component

5.1. Functions of component slots

The parent component passes content to the child component

5.2. Basic Usage of Component slots (Anonymous slots)

5.2.1. Slot location

Vue.component('alert-box', {
    template: ` 
      
 
       Error!  
        
      
 `
})
Copy the code

5.2.2. Slot content

<alert-box>Something bad happened.</alert-box>
Copy the code

5.3. Named slot usage

  • A slot with a name
  • use<slot>The “name” attribute in
  • Specified by the slot attribute, the slot value must correspond to the name value of the following slot component. If no match is found, the slot is placed in an anonymous slot

5.3.1. Slot definition

<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
Copy the code

5.3.2. Slot content

<base-layout>
    <h1 slot="header">The title content</h1>
    <p>Main Content 1</p>
    <p>Main Content 2</p>
    
    <p slot="footer">At the bottom of the content</p>
</base-layout>
Copy the code

5.4. Scope slot

  • Application scenario: The parent component processes the content of the child component
  • You can either reuse the slots of the child components or make the slot contents inconsistent

5.4.1. Use of scope slots

  • In the child component template,<slot>There’s a similar one on the elementpropsA way of passing data to a componentmsg="xxx
  • A slot can provide a default content, which will be displayed if the parent component does not provide content for the slot. If the parent provides content for the slot, the default content is replaced

5.4.2. Slot definition

<ul>
    <li v-for= "item in list" v-bind:key= "item.id" >
        <slot v-bind:item="item">
            {{item.name}}
        </slot>
    </li>
</ul>
Copy the code

5.4.3. Slot content

<fruit-list v-bind:list= "list">
    <template slot-scope="slotProps">
        <strong v-if="slotProps.item.current">
            {{ slotProps.item.text }}
        </strong>
    </template>
</fruit-list>
Copy the code