vue17-子组件定义data属性

看下面代码：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>Hello world</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应该是一个function,返回一个实例值

vue17-子组件定义data属性

data改成这样定义：子组件中data应该是一个function,然后返回一个实例值

               data: function(){
                    return {
                        content: 'this is a row'
                    }
                },

可以这样定义多个：

                    return {
                        content: 'this is a row',
                        name:'xuhaixing'
                    }

vue17-子组件定义data属性

相关推荐