This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

My first reaction when I saw this word was @compent annotation (Spring instantiation). Similar to the idea in Java, everything is an object, and Vue is everything is a component. Vue recommends using SPA’s standard development approach (Single Page Application)

1. Functions of components

Component function: used to reduce the amount of code in the Vue instance (object), in the process of using the Vue development in the future, can according to the different business functions will be divided into different components in the page, then multiple components to build the entire page layout, convenient for using the Vue for development in the future when the page management (can reuse components), convenient maintenance in the future.

2. Component definition

2.1 Registering global components

A global component is registered with a Vue instance object and defined to be used within the scope of the Vue instance.

<div id="app"><! <h2>{{title}}</h2> <! - use global registration components, can reuse - > < login > < / login > < login > < / login > < / div > <! -- 1. Introduce framework support first (VUE file), recommended location before the body end tag (using the browser runtime, if using NodeJS is another way to introduce) --> <script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > / / define global component Vue.com ponent (' login '{ Template :'<diu><h2> User login page </h2></diu>'}); Let vm = new Vue({el: '#app', data: {title: 'component learning - global component registration'}}); </script>Copy the code

Code description:

  1. Vue.componentUsed to develop global components
  • Parameter 1: Defines the component namelogin
  • Parameter 2: Component configuration{} template:''Only one root element must exist in the template to write the HTML code for the component
  1. Use global components by component name within the scope of the Vue instance
  2. If used in the process of registering a component, the hump naming convention is the way of the component, when using the component, all the words in the hump must be lowercase with a hyphen (-), personally don’t recommend humps.

2.2 Registering partial Components

Local component registration completes component registration by registering the component with a Components property in the corresponding Vue instance. This does not accumulate the Vue instance.

<div id="app"><! <h2>{{title}}</h2> <login></login> </login> </register> </register> </register> <user-table></user-table> </div> <! - the third way - > < template id = "userTemplate" > < diu > < h2 > user list page < / h2 > < / diu > < / template > <! -- 1. Introduce framework support first (VUE file), recommended location before the body end tag (using the browser runtime, if using NodeJS is another way to introduce) --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! Let reg = {template:'<diu><h2> user registration page </h2></diu>'}; const userTemplate = { template: "#userTemplate" }; Let VM = new Vue({el: '#app', data: {title: 'component learning - component registration'}, components:{login: {// template:'<diu><h2> </diu>'}, register: reg,// userTable: UserTemplate // The third way: note that I use the camel, scaffolding recommended way}}); </script>Copy the code

3. Component properties

<div id="app"><! <h2>{{title}}</h2> <! </users> </div> <! -- 1. Introduce framework support first (VUE file), recommended location before the body end tag (using the browser runtime, if using NodeJS is another way to introduce) --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! Model --> <script> const Users = {template:'<diu><h2>{{title}} - {{name}} - {{count}} -- {{countSqrt}} < / h2 > < button @ click = "changeCount" > increasing < / button > < ul > < li v - for = "u in the userList" > {{u}} < / li > < / ul > < / diu > ', Function (){return {title: 'userList ', count: 0, name:' userList ', userList:[]}; }, created: the function () {enclosing the userList = [" monkey ", "eight quit", "tang's monk"]. }, methods:{ changeCount:function (){ this.count++; } }, computed:{ countSqrt:function (){ return Math.pow(this.count,2); }}}; Let VM = new Vue({el: '#app', data: {title: 'component learning - local component registration'}, Components :{users:users}}); </script>Copy the code

I will add further details on the implementation of the parent and child component lifecycle.

  • BeforeCreate: The component starts initialization, registering only its own events and lifecycle functions
  • Created: Data /methods/computed data methods have been injected to the component
  • BeforeMount: Compiles the Vue template pointing to HTML before rendering the content in the template
  • Mounted: Renders the COMPILED HTML template in the template to form a virtual DOM, replacing the template with the DOM
  • BeforeUpdate: When data changes in components, the beforeUpdate is triggered. The data on the page is still the original data
  • Updated: Indicates that the data on the page is consistent with the data attribute
  • BeforeDestroy: Triggers the method before destroying the VUE instance
  • Destroy: The VUE instance has been completely destroyed and the listening base has all disappeared

4. Component data transfer

4.1 Parent → Child (Prop)

Functions: Props is used to pass static or dynamic data to a component.

4.1.1 Static data is transmitted within a component through component declarations

<div id="app"><! <h2>{{title}}</h2> <! < div> < div style =" box-sizing: border-box! Important; word-wrap: break-word! Important;" -- 1. Introduce framework support first (VUE file), recommended location before the body end tag (using the browser runtime, if using NodeJS is another way to introduce) --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! <script> const login = {template:'<diu><h3>{{title}} - {{author}} - {{prop}}</h3></diu>', function (){return {// props: props: props: props: props this.showTitle }; }, props:["showTitle","author"] }; Let vm = new Vue({el: '#app', data: {title: 'component learning - data transfer'}, components:{login:login// child component}}); </script>Copy the code

4.1.2 Dynamic data transfer within a component through component declaration

<div id="app"><! <h2>{{title}}</h2> <! </ LOGIN ></ div> <! -- 1. Introduce framework support first (VUE file), recommended location before the body end tag (using the browser runtime, if using NodeJS is another way to introduce) --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! <script> const login = {template:'<diu><h3>{{title}} - {{author}} - {{prop}}</h3></diu>', function (){return {// props: props: props: props: props this.showTitle }; }, props:["showTitle","author"] }; // parent (root) let vm = new Vue({el: '#app', data: {title: 'component learning - data transfer ', bookName: }, components:{login:login// subcomponent}}); </script>Copy the code

4.2 Child → Parent ($emit)

<! DOCTYPE HTML >< HTML lang="en"> <head> <meta Charset ="UTF-8"> <title> Parent component passing data to child component </title> </head> <body> <div id="app"><! <h2>{{title}}</h2> <! Pass the parent component's events in the component, Use @event alias ="findAll Parent event name "--> <login @listall="findAll" @test="test"></login> </div> <script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > / / login component const login = {template: '<div><h3> User login </h3>< button@click ="subTest" ></ button></div>', data:function(){return {}; }, methods:{subTest:function (){alert(" $emit defines event ");}, methods:{subTest:function (){alert(" $emit defines event "); this.$emit("listall"); This $emit (" test ", {name: "the wu is empty", the age: 18})}}}; Let vm = new Vue({el: '#app', data: {title: 'Component learning - child passing to parent ',}, methods:{findAll:function (){alert(" event defined in parent ")}, test:function (book){alert(" receive child passing: "+book.name+", age: "+book.age); } }, components:{ login:login } }); </script> </body> </html>Copy the code