vue组件中是否可以访问实例data中数据？

最新推荐文章于 2023-05-29 14:20:23 发布

zoepriselife316

最新推荐文章于 2023-05-29 14:20:23 发布

阅读量905

点赞数

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

本文链接：https://blog.csdn.net/zoepriselife316/article/details/110442595

版权

Demo 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

vue

41 篇文章 0 订阅

订阅专栏

上代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中是否可以访问实例data中数据？不可以！</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">

        <!-- <p>{{msg}}</p> -->

        <con></con>
    </div>
    <template id="con">
        <div>
            <h1>加油加油啊---{{title}}</h1>
            <span>我是最棒的，我是最棒的！</span>
            <!--
            ，若使用会报错：
            vue.js:634 [Vue warn]: Property or method "msg" is not defined 
            on the instance but referenced during render.
             Make sure that this property is reactive, either
              in the data option, or for class-based components,
               by initializing the property. See:
                https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

                found in
                <Con>
                    <Root>
                --->
                <!-- <span>{{msg}}</span> -->
                <p>
                    在组件中，不能使用实例中的data数据.而且，即使可以访问，把所有数据都放到
                    实例中会很臃肿。
                </p>   
                <h3>Vue组件有自己保存数据的地方</h3>
        </div>
    </template>

    <script>
        Vue.component('con', {
            template: '#con',
            //直接这么写会报错：vue.js:634 [Vue warn]: The "data" option should be a function 
            // that returns a per-instance value in component definitions.
            // data:{
            //     title:'菲菲加加加油'  
            // }
            // 这是正确的
            data(){
                return{
                    title:'菲菲加油'
                }
            }

        })
        const app = new Vue({
            el: '#app',
            data: {
                msg: '我是最棒的女孩！'
            }
        })
    </script>
</body>

</html>

zoepriselife316

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件中是否可以访问实例data中数据？

上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件中是否可以访问实例data中数据？不可以！</title> <script src="htt
复制链接

扫一扫