1. Use of components:

  • Create the component constructor
  • Certified components
  • Using the component

1. Create the component constructor

Const cpnC = Vue. The extend ({template: ` < div > < h2 > I am a title < / h2 > < p > I'm content < / p > < / div > `})Copy the code

2. Register components

        Vue.component('my_cpn', cpnC)
Copy the code

3. Use components

    <div id='app'>
        <my_cpn></my_cpn>
        <my_cpn></my_cpn>
        <my_cpn></my_cpn>
    </div>
Copy the code

Note: In fact, this notation is almost invisible in the Vue2. X documentation. It uses the following syntactic sugar directly, but this is the basis for learning the latter.

2. Global and local components

Global components, meaning they can be used under multiple instances of Vue. The component we registered above is a global component. So how do we register local components?

We need to register under the Vue instance

Const app = new Vue({el: '#app', data: {}, // Register local component components:{my_cpn:cpnC}})Copy the code

3. Parent and child components

    <div id='app'>
        <cpn2></cpn2>
    </div>
Copy the code
Const cpnC1 = Vue. Extend ({template: '<div> <h2> I am title 1</h2> <p> I am content 1</p> </div>'})Copy the code
// 2. Create a second component (parent) const cpnC2 = vue.extend ({template: ` < div > < h2 > I am heading 2 < / h2 > < p > I'm content 2 < / p > < cpn1 > < / cpn1 > < / div > `, components: {cpn1: cpnC1}})Copy the code
Const app = new Vue({el: '#app', data: {message: 'hello vue.js'}, Components: {cpn2: cpnC2}})Copy the code

4. Register component syntax sugar

The call to vue.extend () is largely omitted, and an object can be used instead

// Create a component constructor // 2. Components registered Vue.com ponent (' cpn1, {template: ` < div > < h2 > I am title < / h2 > < p > I'm content < / p > < / div > `})Copy the code

5. Writing method of component template extraction

<! The first type :script tag, The type must be text/x-template --> <script type="text/x-template" id="cpn1"> <div> <h2> I am the title </h2> <p> I am the content </p> </div> </script>Copy the code
<! <div> <h2> I am heading 1</h2> <p> I am content 1</p> </div> </template> <script SRC ='.. /js/vue.js'></script> <script>Copy the code
        Vue.component('cpn2', {
            template: "#cpn2"
        })
Copy the code

6. Can components access Vue instance data?

Can’t! A component is the encapsulation of a single functional module:

This module has its own HTML template and should also have its own data data.

So where does the component’s own data go?

  • Component objects also have a data property (or methods, etc.)
  • But the data property must be a function
  • And this function returns an object that holds data inside
        Vue.component('cpn2', {
            template: "#cpn2",
            data() {
                return {
                    title: "abc"
                }
            }
        })
Copy the code

Why does data have to be a function?

When multiple components are used, they do not affect each other.

7. Communication between parent and child components,

In the previous section, we mentioned that a child component cannot reference data from a parent component or a Vue instance.

However, often in development, some data does need to be passed from top to bottom:

  • For example, on a page, we request a lot of data from the server.
  • Some of this data, instead of being presented as a large component of our entire page, needs to be presented by the following sub-components.
  • Instead of having the child component send a network request again, we have the larger component (parent) pass the data to the subcomponent (child).

So how do you communicate between parent and child components?

  • Pass data to subcomponents through props
  • Send information to the parent component through events

Basic usage of props

  • In the component, use the option props to declare the data that needs to be received from the parent.
  • The value of props can be done in two ways
  • Method 1: string data, the string in the array is the name of the pass
  • Method 2: object, object can be set when the type of transfer, can also set the default value

A:

Method 2:

Send information to the parent component through events

this.$emit()

<body> <div id='app'> <cpn @itemclick="cpnclick"></cpn> </div> <template id="cpn"> <div> <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button> </div> </template> <script src='.. /js/vue.js'></script> <script> const cpn = { template: '#cpn', data() { return { categories: [ { id: 1, name: "Orange"}, {id: 2, name: the word "apple"}, {3, id: name: "banana"}, {id: 4, name: "watermelon"},]}}, the methods: { btnclick(item) { this.$emit('itemclick', item) } }, } const app = new Vue({ el: '#app', data: { message: }, components: {CPN}, methods: {cpnclick(item) {console.log('cpnclick', item)}},}) </script>Copy the code

8. Access to parent and child components: $children

  • Parent component accesses child component: use $children or $refs
  • Child component accesses parent: use $parent
The < body > < div id = 'app' > < CPN > < / CPN > < CPN > < / CPN > < CPN > < / CPN > < CPN ref = "aaa" > < / CPN > < button @ click = "btnclick" > button < / button > < / div > < template id = "CPN" > < div > < h1 > I am a child component < / h1 > < / div > < / template > < script SRC = '.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js'}, methods: { btnclick() { // console.log(this.$children[0].showmessage); console.log(this.$refs.aaa.name);; }}, components: {' CPN ': {template: '# CPN ', data() {return {name: 'orange'}}, methods: { showmessage() { console.log('showmessage') } }, } } }) </script> </body>Copy the code
<body> <div id='app'> <cpn></cpn> </div> <template id="cpn"> <div> <ccpn></ccpn> </div> </template> <template id="ccpn"> <div> <h1> I am CPN component </h1> < button@click ="btnclick"> </button> <h3> I am a child component </h3> </div> </template> <script SRC ='.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js'}, components: {' CPN ': {template: '# CPN ', data() {return {name: "orange"}}, components: {' CCPN ': {template: '# CCPN ', methods: {btnclick() {// Access the parent component $parent // console.log(this.$parent. Name) // Access the root component $root console.log(this. } }, } } } } }) </script> </body>Copy the code

9. Basic use of slots

<body> <div id='app'> <cpn> <h4>1111</h4> </cpn> <cpn> <h4>2222</h4> </cpn> <cpn></cpn> <cpn></cpn> </div> <template Id = "CPN" > < div > < h2 > Vue interesting < / h2 > < p > haha < / p > < slot > < button > button < / button > < / slot > < / div > < / template > < script SRC = '.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js',}, components: {' CPN ': { template: '#cpn' } } }) </script> </body>Copy the code

A named slot

<body> <div id='app'> < CPN ><button slot="medium"> </button>< CPN ><button slot="right"> </button></ CPN > </div> <template id=" CPN ">< div> <h2> Use of named slot </h2> <slot name="left"><span> left </span></slot> <slot Middle name = "medium" > < span > < / span > < / slot > < slot name = "right" > < span > right < / span > < / slot > < / div > < / template > < script SRC = '.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js'}, components: {' CPN ': { template: '#cpn' } } }) </script> </body>Copy the code

Compile scope

The < body > < div id = 'app' > < CPN v - show = isShow > < / CPN > < / div > < template id = "CPN" > < div > < h2 > I am a child component < / h2 > < p V-show =isShow> I am content hey hey hey </p> </div> </template> <script SRC ='.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js', isShow: true }, components: { cpn: { template: "#cpn", data() { return { isShow: false } } } } }) </script> </body>Copy the code

Official rule: Everything in the parent component template is compiled in the parent scope; Everything in the subcomponent template is compiled in the subscope

Scope slot

It’s a little hard to understand, but let me summarize it in one sentence

  • The parent component replaces the label of the slot, but the content is provided by the child component
<body> <div id='app'> <cpn> <template slot-scope="slot"> <span v-for="item in slot.data">{{item}}-</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span v-for="item in slot.data">{{item}}-</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join('*')}}</span> </template> </cpn> </div> <template id="cpn"> <div> < h1 > I am a child component < / h1 > < slot: data = planguage > < ul > < li v - for = "item in planguage" > {{item}} < / li > < / ul > < / slot > < / div > < / template > <script src='.. /js/vue.js'></script> <script> const app = new vue ({el: '#app', data: {message: 'hello vue.js'}, components: {CPN: { template: '#cpn', data() { return { planguage: ['JavaScript', 'Java', 'Python', 'C++', 'Swift'] } } } } }) </script>Copy the code