vue17-子组件定义data属性

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

看下面代码：

<!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,返回一个实例值

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

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

可以这样定义多个：

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

以上是 vue17-子组件定义data属性 的全部内容， 来源链接： utcz.com/z/377877.html

回到顶部