vue零基础开发014——模板子组件中的data定义

作者: 文朝明 | 来源:发表于2019-11-22 17:28 被阅读0次

vue零基础开发014——模板子组件中的data定义
vue学习
Vue组件data必须是函数
Vue学习记录
为什么Vue的data属性是一个函数而不是一个对象？
Vue学习(二)
Vue: slot实现动态列表
9道vue面试题
2018-07-02
第3章 vue组件开发

这样赋值我们什么都得不到：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件中赋值方法</title>
    <script src="./vue.js"></script>
</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: {
                content:"this is  a row"
            }，
                template: "<tr><td>{{content}}</td></tr>"
            }
        )
        var vm = new Vue({
            el: "#root",
           
        })
    </script>
</body>
</html>

什么都没得到

为什么呢，因为在子组件中，可能被调用多次，为了避免重复和冲突，所以data要求必须是函数。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>子组件中的data定义</title>
    <script src="./vue.js"></script>
</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>

子组件中的data定义