Vue学习笔记（九）之组件中使用的细节点

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。我们可以通过is特性解决这个问题。
效果

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
<div id="root">
    <table>
        <tbody>
        <!-- <row></row> 这种写法会被作为无效的内容提升到外部，并导致最终渲染结果出错 -->
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
        </tbody>
    </table>
</div>
<script>
    Vue.component('row', {
        template: '<tr><td>this is a row</td></tr>'
    })

    var vm = new Vue({
        el: '#root'
    })


</script>
</body>

</html>

组件的data 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，否则，他们维护的是同一个数据，一个组件数据的改变会影响到其他复用的组件。
效果

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
<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 a row"
            }
        },
        template: '<tr><td>{{content}}</td></tr>'
    })

    var vm = new Vue({
        el: '#root'
    })
</script>
</body>

</html>

ref的用法

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

普通DOM上引用ref

效果

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div id="root">
        <div ref='hello' @click="handleClick">Hello World</div>
        <!--通过点击div打印出该DOM节点-->
    </div>
<script>

    var vm = new Vue({
        el: '#root',
        methods: {
            handleClick: function() {
                console.log(this.$refs.hello)
            }
        }
    })
</script>
</body>

</html>

组件上引用ref

效果

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div id="root">
        <counter ref="countOne" @change="handleChange"></counter>
        <counter ref="countTwo" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
<script>
    Vue.component('counter', {
        template: '<div @click="handleClick">{{number}}</div>',
        data: function() {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function() {
                this.number ++
                this.$emit('change')
            }
        }
    })
    var vm = new Vue({
        el: '#root',
        data: {
            total: 0
        },
        methods: {
            handleChange: function() {
                this.total = this.$refs.countOne.number + this.$refs.countTwo.number
            }
        }
    })
</script>
</body>

</html>

解析 DOM 模板时的注意事项

组件的data 必须是一个函数

ref的用法

FEATURED TAGS

FRIENDS