4-1 Use component detail points

1. Is used

When we write loop components, we often define components for table tr select option LI ul or OL li etc., we often use is to define component names in order for the browser to successfully render the correct DOM structure

<div id="root">
    <table>
        <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
        </tbody>
    </table>
    <select name="" id="">
        <option is="selectOption"></option>
        <option is="selectOption"></option>
        <option is="selectOption"></option>
    </select>
    <ul>
        <li is="ulLi"></li>
        <li is="ulLi"></li>
        <li is="ulLi"></li>
    </ul>
</div>
<script>
    Vue.component('row', {
        template: '<tr><td>this is a row</td></tr>'
    });
    Vue.component('selectOption',{
        template: '<option>this is option</option>'
    });
    Vue.component('ulLi',{
        template: '<li>this is li</li>'
    });
    var app = new Vue({
        el: '#root',
        data: {},
    })
</script>
Copy the code

2. When a child component defines data, it must be a function, not an object. The reason for returning an object is that each child component can have a separate data store. This way the data between components does not affect each other

In the root component, data can be an object.

<div id="root"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component('row', {data: function () {return {content: 'this is row'}}, template: '<tr><td>{{content}}</td></tr>' }); var app = new Vue({ el: '#root', data: {} }) </script>Copy the code

3. Sometimes in the development process, dom operations are necessary for some business requirements, so we can use REF to achieve this

<div id="root"> <div ref="hello" @click="handleClick">hello world</div> </div> <script> var app = new Vue({el: '#root', data: {}, methods: { handleClick: function () { console.log(this.$refs.hello.innerHTML); // Get the text of the current node using the refs attribute}}}); <div id="root"> <counter ref="one" @change="handleChange"></counter> <counter ref="two" @change="handleChange"></counter> <div>{{total}}</div> </div> <script> Vue.component('counter', { data: function () { return { number: 0 } }, template: '<div @click="handleClick">{{number}}</div>', methods: { handleClick: function () { this.number++; this.$emit('change'); // Trigger a listener}}}); var app = new Vue({ el: '#root', data: { total: 0 }, methods: { handleChange: Function () {this. Total = this.$refs.one. Number + this.$refs.two. Number}}); </script>Copy the code

4-2 Data transfer between parent and child components

Parent component sends value to child component: child component sends value to parent component via property: can emit an event via $emit

Vue data transfer follows one-way data flow. Therefore, in the following case, we did not directly accumulate the content data, but assigned the content data to the number, and accumulated the data on the number.

<div id="root"> <counter :content="1" @inc="handleInc"></counter><! - the parent component through property to value children -- -- > < counter: the content = "3" @ inc = "handleInc" > < / counter > < div > {{total}} < / div > < / div > < script > Vue.component('counter', { props: ['content'], data: function () { return { number: }}, template: '<div @click="handleClick">{{number}}</div>', methods: {handleClick: function () { this.number += 2; $emit('inc', 2); // This.$emit('inc', 2); }}}); var app = new Vue({ el: '#root', data: { total: 4 }, methods: { handleInc: function (step) { this.total += step } } }) </script>Copy the code

4-3 Component Parameter Verification and non-props features

1. Verify component parameters

<div id="root">
    <child content="hello"></child>
</div>
<script>
    Vue.component('child', {
        props: {
            content: {
                type: String,
                required: true,
                default: 'default Value',
                validator: function (value) {
                    return (value.length > 5)
                }
            }
        },
        template: '<div>{{content}}</div>'
    });
    var app = new Vue({
        el: '#root',
    })
</script>
Copy the code

The parent component passes the properties and the child component accepts the properties. The properties of the props are not displayed in the DOM tags. The parent component passes the properties, and the child component does not accept them, but calls the props properties directly, which are displayed in the DOM tag

4-4 Bind native events to components

Bind native events via the.native property

<div id="root">
    <child @click.native="handleClick"></child>
</div>
<script>
    Vue.component('child', {
        template: '<div>child</div>'
    })
    var app = new Vue({
        el: '#root',
        methods: {
            handleClick: function () {
                console.log('click');
            }
        }
    })
</script>
Copy the code

4-5 Value transfer between non-parent and child components

1. Through VUEX 2. Through publish subscribe mode (Bus/ Bus/ Publish subscribe mode/Observer mode /)

<div id="root"> <child content="sunny"></child> <child content="fan"></child> </div> <script> Vue.prototype.bus = new Vue(); // Define bus Vue.component('child', {data: function () {return {newContent: this.content}}, props: {content: String }, template: '<div @click="handleClick">{{newContent}}</div>', methods: { handleClick: function () { this.bus.$emit('change', this.newContent); }}, mounted: function () {var that = this; // Float an event on the bus. $on('change', function (MSG) {console.log(MSG) that. NewContent = MSG)}); var app = new Vue({ el: '#root' })Copy the code

4-6 Using slots in VUE

There can only be one slot and there can be more than one slot

<div id="root"> <body-content> <p slot="header">this is header</p> <p slot="footer">this is footer</p> </body-content> </div> <script> Vue.component('body-content',{ template: '<div> <slot name="header">default header</slot> // Set the default value <p> This is content</p> <slot name="footer"></slot> </div>'}) var app = new Vue({ el:'#root' }) </script>Copy the code

4-7 Scope slots

When a parent component calls a child component, it passes a slot to the child. This slot is a scoped slot. 2. When the dom structure of the child component is passed in from outside, or is externally determined

<div id="root">
    <child>
      <template slot-scope="props">
        <li>{{props.item}}</li>
      </template>
    </child>
  </div>
  <script>
    Vue.component('child', {
      data: function () {
        return {
          list: [1, 2, 3, 4]
        }
      },
      template: `<div>
        <ul>
          <slot v-for="item of list" :item=item></slot>
        </ul>
      </div>`
    })
    var app = new Vue({
      el: '#root'
    })
  </script>

Copy the code

4-8 Dynamic components and V-once instructions

<div id="root"> <component :is="type"></component> <! - this is the dynamic component - > < child - - if one v = "type = = = 'child - one,'" > < / child - one > < child - two v - if = "type = = = 'child - two" > < / child - two > < button  @click="hanleBtnClick">change</button> </div> <script> Vue.component('child-one', { template: '<div v-once>child-one</div>' }) Vue.component('child-two', { template: '<div v-once>child-two</div>' }) var app = new Vue({ el: '#root', data: { type: 'child-one' }, methods: { hanleBtnClick: function () { this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } } }) </script>Copy the code

Again to canvassing links, for praise, for attention to the public numberSunnyFan's programmed life, continue to update useful front-end knowledge, front-end dry goods to share with you.

If you are an Apple computer user and need some MAC cracking software, you can send me a private message on wechat: Sunnyfan123456