vue中私有组件和data

最新推荐文章于 2022-08-01 16:27:57 发布

原创最新推荐文章于 2022-08-01 16:27:57 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Vue.js创建局部组件，并展示了如何定义组件内的data属性。通过示例代码，读者可以了解基本的Vue组件结构及data属性的使用方法。

1.私有组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建局部组件</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <templ></templ>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
                templ:{
                    template:'<h1>私有组件</h1>'
                }
            }
        })
    </script>
</body>
</html>

2.组件中的data

Vue.component('mycom',{
            template:'<h1>第三种方式的组件<h1>--{{ msg }}',
            data:function(){
               return  {
                    msg:'组件中的data',
                }
               
            }
        })