组件中的data

最新推荐文章于 2024-06-03 14:34:42 发布

该睡觉觉了

最新推荐文章于 2024-06-03 14:34:42 发布

阅读量366

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115384574

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

data

 * 1.在子组件中:data是一个函数,并且要有返回值
 * 2.data为什么是函数:
 *   a.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据
 *   b.每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 作用域 -->
    <div id="app">
        <v-one></v-one>
    </div>

    <!-- 标签模板: one组件 -->
    <template id="one">
        <div class="one">
            <h1>one组件</h1>
            <div>name的值为:{{name}}</div>
        </div>
    </template>
    <script>
        // 实例化vue
        new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
                vOne:{
                    template:'#one',
                    /**
                     * 1.在子组件中:data是一个函数,并且要有返回值
                     * 2.data为什么是函数:
                     *   a.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据
                     *   b.每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.
                     * 
                    */
                    data(){
                        return {
                            name:'赵丽颖'
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

总结:
根组件:Vue实例
	el:'#app',//挂载点
	data:{},//数据,且是一个json
	methods:{},//方法
	computed:{},//计算属性,
	watch:{},//监听
	filters:{},//过滤器
	components:{},//组件
子组件:VueComponent实例
	template:'#one',//挂载点
	data(){return {....}},//数据,是一个函数,并且要有返回值
	methods:{},//方法
	computed:{},//计算属性,
	watch:{},//监听
	filters:{},//过滤器
	components:{},//组件

该睡觉觉了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件中的data

data * 1.在子组件中:data是一个函数,并且要有返回值 * 2.data为什么是函数: * a.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据 * b.每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
复制链接

扫一扫