从零开始学VUE之组件化开发(组件数据的存放)

2021-06-07 17:36:34 浏览数 (2)

组件数据的存放

组件无法直接访问页面的对象数据
组件对象也有自己的data属性(也可以有Methods方法)
只是这个data属性必须是一个函数
而且这个函数返回一个对象,对象内部保存着数据

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
</div>
</body>
<template id="cpn">
<div>{{title}}</div>
</template>
<script>
    Vue.component('cpn',{
        template: '#cpn',
        data(){
            return {
                title:'this is data store!'
            }
        }
    });

    const vue = new Vue({
        el: '#app',
        data: {}
    })
</script>
</html>

运行效果

作者：彼岸舞

时间：202162

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

data methods

0 人点赞