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

1. The IS tag solves the small bug when rendering the template tag

  • Bug scenario: Child component was not rendered in the correct place when introduced. Custom components<row>Will be promoted to the outside as invalid content, resulting in an error in the final render. As follows:
<div id="root">
    <table>
        <tbody>
            <row></row>
        </tbody>
    </table>
</div>

Vue.component('row',{
        template: '<tr><td>This is a table-td</td></tr>'
})
var vm = new Vue({
        el: '#root',
})

Copy the code
  • There is a problem: View background review elements to see how the page is rendered: Found< tr > and < table >At the same level, it doesn’t make sense. Because the H5 specification requires us to nest in.

  • Solution: Use the IS label. Use the child component in the H5 label.
<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
Copy the code
  • Cause analysis,: Vue when parsing a DOM template, some HTML elements such as<ul>,<ol>,<table> 和 <select>There are strict restrictions on what elements can appear inside it. And some elements, such as<li>,<tr> 和 <option>Can only appear inside certain other elements. This leads to the problem described above when using these constrained elements. So there’s a specialisProperties provide a workaround.

Data defined in the child component. The value must be a function (the function returns an object).

  • Bug scenario: When a child component is introduced, the following content is directly defined in the child component:
Vue.component('row',{
    data: {
            content: 'This is a test content'
    },
    template: '<tr><td>{{content}}</td></tr>'
})
Copy the code
  • Problem: The above proxy seems to have no error, but it will report error when rendering the page.

  • Solution: When a child component defines data, the value must be a function (the function returns an object that contains your data).
Vue.component('row',{
    data: function(){
            return {
                    content: 'This is a test content'
            }
    },
    template: '<tr><td>{{content}}</td></tr>'
})
Copy the code
  • Cause analysis: In the root component (the outermost instance of Vue), if data is defined as an object, there is no error. But when you define data in a non-root component (a child component), you cannot use an object. Instead, you require that the value after data be a function (which returns an object). This is because when a child component is called, unlike the root component, which is called only once, it may be called multiple times in the same place. Each child component should have its own data when called, and the purpose of returning an object value by a function is to have a separate data store for each child component, so that there is no interaction between the children.

Three,Example of the use of a ref in a child component to dynamically obtain component content

$refs.miya.innerhtml: this.$refs.miya.innerhtml: this.$refs.miya.innerhtml: this.

  • Scenario requirements: make a counter and be able to click numbers in order +1, and sum the two

    components;

  • Solution: The implementation idea is as follows

    • $emit=’change’; $emit=’ emit ‘; $emit=’ emit ‘; $emit=’ emit ‘

    • The

      component referenced in the parent component: to listen for this event, that is, to bind an event listener method (here @change=” XXX “)

    • The Vue instance defines methods, using this bound method

    <div id="root"> <! <counter ref="one" @change="handlechange"></counter> <counter ref="two" @change="handlechange"></counter> <div>{{total}}</div> </div> Vue.component('counter', { template: '<div @click="handleClick">{{number}}</div>', data: function() { return { number: 0 } }, methods: { handleClick: $emit('change')}}}) var vm = new Vue({el: "#root", data: { total: 0 }, methods: { handlechange: function() { this.total = this.$refs.one.number + this.$refs.two.number } } })Copy the code