Vue Basics---Vue component 2

Defining Global Components

We define a global component through Vue's component method.

 <div id= "App" > <!--use a defined global component--<counter></counter></div><script src= ".    Node_modules/vue/dist/vue.js "></script><script type=" Text/javascript "> //  Define global components, two parameters: 1, Component name. 2, component parameter  vue.component ("Counter" ,{Template:  ' <button v-on:click= "co unt++ "> You ordered me {{count}} times, I remember .</button> ' , data () { return   {count:  0} }})  var  app = new   Vue ({el:  "#app"  </script> 

• The component is also a Vue instance, so it is also received when it is defined: data, methods, life cycle functions, etc.
• The difference is that the component is not bound to the element of the page, otherwise it cannot be reused, so there is no El attribute.
• However, the component rendering requires an HTML template, so the template property is added, and the value is HTML templates
• The global component definition is complete, and any Vue instance can use the component directly in the HTML through the component name.
• Data is defined in a special way and must be a function.

Reuse of components

A well-defined component can be reused multiple times:

<div id= "App" >    <!--use defined global components--    <counter></counter>    <counter></ Counter>    <counter></counter></div>

You will find that each component does not interfere with each other and has its own count value. How did it come true?

When we define this <counter> component, its data does not provide an object directly like this:

data: {  0}

Instead, the data option for a component must be a function, so each instance can maintain a separate copy of the returned object:

function () {  return  {    0  }}

If Vue doesn't have this rule, clicking on a button will affect all other instances!

Local registration

Once the global registration, it means that even if you no longer use this component, it will still be loaded with the Vue load.

Therefore, for some components that are not used frequently, we use partial registration.

We first define an object externally, and the structure is the same as the second parameter passed when the component was created:

Const COUNTER = {    Template:' <button v-on:click= ' count++ ' > You ordered me {{count}} times, I remember .</button> ' ,    data () {        return  {            count:0        }}    ;

Then use it in Vue:

var New Vue ({    el:"#app",    components:{        //  register the defined object as a component     }})

• Components are the current set of Vue object subcomponents.
  • Its key is the child component name
  • Its value is the property of the Component object
• The effect is similar to the global registration just now, except that the counter component can only be used in the current Vue instance

Component communication Parent-to-child delivery props

For example, we have a sub-component:

Vue.component ("introduce", {    // ) render the page template directly using the props received property    : ' 
,    //  to receive properties passed by a parent component through props })

• This subassembly renders the page with the Title property, but does not own the Title property
• Receive parent component properties by props, named title

The parent component uses subcomponents and passes the title property:

<div id= "App" >        vue.component (" introduce ", {        //  directly using props received properties to render the page         Template: ' ,        props:[//  To receive a property passed by a parent component through props     }    )varnew  Vue ({        el:"#app"     })</script>

Passing Complex data

We define a sub-component:

 Const myList = {Template:  '  <ul>        <li v-for= "Item in Items": key= "Item.id" >{{item.id}: {{item.name}}</li> </ul>  ' 

• This subassembly iterates over items and outputs them to the page.
• However, the Items property is not defined in the component.
• To define the properties that need to be received from the parent component through props
  • Items: is the name of the property to receive
  • Type: Must be an array to qualify the parent component for delivery or an error
  • Default: Defaults

We use it in the parent component:

<div id= "App" >    
var New Vue ({    el:"#app",    components:{        //  when key is the same as value, you can write only one     },    data:{        lessons:[            {id:1, Name: ' Java '},            {id:2, Name: ' php '},            {ID: 3, Name: ' iOS '},        ]}    )
Child-to-parent communication
Look at a case like this:
<div id= "App" > Vue.component ("Counter", {Template:‘<div> <button @click = "plus" > plus </button> <button @click = "reduce" > Subtract </button> </div>‘, props:[' Count '], methods:{Plus () { This. $emit ("Inc"); }, reduce () { This. $emit ("Dec"); }        }    })    varApp =NewVue ({el:"#app", data:{Num:0}, methods:{//methods that define the operation Num in the parent componentincrement () { This. num++; }, Decrement () { This. num--; }        }    })</script>
 
 

  
  
 
   
Vue provides a built-in this. $emit function to invoke the parent component's bound function
 
  
 
 
Vue Basics---Vue component 2