Vue中元件使用的一些小坑兒

梭梭醬加油鴨發表於2019-04-05
Vue元件

tbody中無法直接使用元件？

<div id="root">
       <table>
        <tbody>
            <row></row>
        </tbody>   
       </table>    
    </div>
    <script>
        Vue.component('row',{
            template:'<tr><td>this is a row</td></tr>'
        })
        var vm = new Vue({
            el: '#root',
            data: {
                
            },
            methods:{
            
            }
        })
    </script>
複製程式碼

以上程式碼你以為會怎麼渲染？一定是這樣的對不對：

<div id="root">
       <table>
        <tbody>
            <tr><td>this is a row</td></tr>
        </tbody>   
       </table>    
    </div>
複製程式碼

其實是這樣的：

<div id="root">
    <tr><td>this is a row</td></tr>
    <table>
        <tbody></tbody>   
    </table>    
</div>
複製程式碼

沒錯，元件被渲染到表格外面了。這是因為h5編碼規範要求tbody裡必須是tr，所以不能直接用row，Vue提供了一個is屬性，通過is把tr轉換成row就可以解決：

<div id="root">
       <table>
        <tbody>
            <tr is="row"></tr>
        </tbody>   
       </table>    
</div>
複製程式碼

同理，ul列表裡最好也這麼用：

<ul><li is="row"></li></ul>
複製程式碼

select標籤裡的option也同理。

子元件裡定義data時一定要採用函式方式

<div id="root">
       <table>
        <tbody>
            <tr is="row"></tr>
        </tbody>   
       </table>    
    </div>
    <script>
        // 子元件
        Vue.component('row',{
            data: {
                content: "this is content"
            },
            template:'<tr><td>{{content}}</td></tr>'
        })
        // 父元件
        var vm = new Vue({
            el: '#root'
        })
    </script>
複製程式碼

如上程式碼是會報錯的，因為子元件外面還有一個父元件，應該這麼寫：

<div id="root">
       <table>
        <tbody>
            <tr is="row"></tr>
        </tbody>   
       </table>    
    </div>
    <script>
        // 子元件
        Vue.component('row',{
            data: function(){
                return {content: "this is content"}
            },
            template:'<tr><td>{{content}}</td></tr>'
        })
        // 父元件
        var vm = new Vue({
            el: '#root'
        })
    </script>
複製程式碼

Vue如何獲取dom節點及其中的變數

<div id="root">
       <div ref='hello' @click="handleClick">hello world</div> 
       <counter ref='one' @change="handleChange"></counter>
       <counter ref='two' @change="handleChange"></counter>
       <div>{{total}}</div>
    </div>
    <script>
        Vue.component('counter',{
            template:'<div @click="addNumber">{{number}}</div>',
            data:function(){
                return {
                    number:0
                }
            },
            methods:{
                addNumber:function(){
                    this.number ++
                    this.$emit('change')
                }
            }
        })
        var vm = new Vue({
            el: '#root',
            data:{
                total:0
            },
            methods:{
                handleClick:function(){
                    // hello指代的就是ref='hello'的dom節點
                    alert(this.$refs.hello.innerHtml)
                },
                handleChange:function(){
                    this.total = this.$refs.one.number+ this.$refs.two.number
                }
            }
        })
    </script>
複製程式碼

相關文章