vue子组件使用细节

最新推荐文章于 2023-09-09 19:40:32 发布

西门吃雪……

最新推荐文章于 2023-09-09 19:40:32 发布

阅读量145

点赞数

分类专栏： vue 学习记录文章标签： vue

本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109270346

版权

vue 学习记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<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: {
                contenet: 'this is a row'
            },
            template: '<tr><td>{{content}}</td> </tr>'
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

运行中页面报错

在这里插入图片描述
在vuezhong 如果在根组件中定义 data 不会出现如何问题 .
但是在子组件中必须定义函数

正确代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件使用中的细节点2</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  content'
                }
            },
            template: '<tr><td>{{content}}</td> </tr>'
        })


        var vm = new Vue({
            el: '#root',
        })
    </script>

</body>

</html>

在这里插入图片描述

西门吃雪……

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue子组件使用细节

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件使用中的细节点,子组件的正确使用方式</title> <script src='./vue.js'></script></head><body> <div id="root">
复制链接

扫一扫

专栏目录