vue17-子组件定义data属性

╰+哭是因爲堅強的太久メ 2022-05-10 00:52 86阅读 0赞

看下面代码：

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

![70][]

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

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

可以这样定义多个：

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

[70]: /images/20220510/44b99c399b48499a9cd0cb13317e83a9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件改变子组件的data

项目开发的过程中，我们会经常使用到ref，刚开始学习vue的时候以为这个是鸡肋，后来发现真香父组件改变子组件的data 父组件 <template> ...

曾经终败给现在/ 2024年04月19日 08:42/ 0 赞/ 20 阅读

相关 vue父组件获取子组件的属性或方法

父组件代码片段： 2 <v-autoTextarea ref="autotext" :value="d_value"></v-autoTextarea> 这里要用

忘是亡心i/ 2022年10月09日 03:07/ 0 赞/ 155 阅读

相关 html —— data-*自定义属性

一、基本说明文档说明： The data- global attributes form a class of attributes, called custom

╰半橙微兮°/ 2022年09月25日 12:29/ 0 赞/ 179 阅读

相关 vue17-子组件定义data属性

看下面代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月10日 00:52/ 0 赞/ 87 阅读

相关【Vue】10.vue中父组件通过props属性向子组件传值

在vue项目开发的过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来，这时可能会产生一些疑问和需求？比如一个组件调用另外一个组件作为自己的组件，那么我们如何进

骑猪看日落/ 2022年03月22日 06:44/ 0 赞/ 193 阅读

相关黑马学习记录--Vue 定义局部子组件以及组件切换

使用`components`属性定义局部子组件 1. 组件实例定义方式： <script> // 创建 Vue 实例，得到 ViewModel

「爱情、让人受尽委屈。」/ 2022年03月17日 07:16/ 0 赞/ 159 阅读

相关 vue子组件

1、父组件引用 <template> <MyPagination :total="total1" :pageNum="pageNum1" :pa

我就是我/ 2022年01月07日 05:57/ 0 赞/ 191 阅读

相关 data-* 自定义数据属性

`data-` 作为一个 HTML5 的自定义数据属性，主要是用来规范和管理用户自定义属性的. 1. 使用方式如下: <div id="demo" data-ti

我不是女神ヾ/ 2021年09月18日 02:26/ 0 赞/ 410 阅读

相关 vue 定义组件

在js中定义组件 Vue.component('名称',{ template:'xx', data:function(){

向右看齐/ 2021年07月24日 23:04/ 0 赞/ 379 阅读

相关 data-* 自定义属性

之前没有关于自定义属性的规范，所以管理起来比较混乱。 HTML5增加data-*用于设置自定义属性，可以用来存储数据，也可以称之为数据属性。同时，JavaScript提...

小灰灰/ 2020年05月16日 16:19/ 0 赞/ 1004 阅读