vue17-子组件定义data属性

╰+哭是因爲堅強的太久メ 2022-05-10 00:52 122阅读 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 条评论，122人围观）

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

相关阅读

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

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

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

相关 uni-app vue 父组件获得子组件data值为undifne

原因子组件初始化过慢导致父组件在执行子组件的方法时还没有初始化完成代码子组件 created() { // 在组件初始化的时候执行，

一时失言乱红尘/ 2023年06月24日 06:29/ 0 赞/ 8 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue子组件

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

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

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

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

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

相关 vue 定义组件

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

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

相关 data-* 自定义属性

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

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