Vue 组件化

最新推荐文章于 2024-05-08 13:15:46 发布
最新推荐文章于 2024-05-08 13:15:46 发布
阅读量1.1k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47906106/article/details/129694196
版权

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <!--组件名就是调用组件时的标签-->
        <my-hello></my-hello>

    </div>
    
    <template id="content">
        <div>
            <h3>自定义全局组件</h3>
            <p>MyHello</p>
            <p>name:{{name}}</p>
        </div>
    </template>
</body>

<script>
    const app = Vue.createApp({
        data(){
        }
    })
    app.component('my-hello',{ // 组件名使用短横线相连,全小写
        template:'#content',
        data(){
            return{
                name:'tom'
            }
        }
    })

    const vm = app.mount('#app')
</script>

在这里插入图片描述

组件多次调用，他们之间是互不影响的

<body>
    <div id="app">
        <!--组件名就是调用组件时的标签-->
        <my-hello v-for="(item,index) in 3" :key="index"></my-hello>

    </div>
    
    <template id="content">
        <div>
            <h3>自定义全局组件</h3>
            <p>MyHello</p>
            <p>name:{{name}}</p>
            <input type="text" v-model="name">
        </div>
    </template>
</body>

<script>
    const app = Vue.createApp({
        data(){
        }
    })
    app.component('my-hello',{ // 组件名使用短横线相连,全小写
        template:'#content',
        data(){
            return{
                name:'tom'
            }
        }
    })
    const vm = app.mount('#app')
</script>

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <comp-a></comp-a>

    </div>
    
    <template id="a">
        <div>
           <h3>组件A</h3>
           <p>{{msg}}</p>
        </div>
    </template>
</body>

<script>
    const app = Vue.createApp({
        components:{
            'comp-a':{
                template:'#a',
                data(){
                    return{
                        msg:'aaa'
                    }
                }
            }
        }

    }).mount('#app')

</script>

在这里插入图片描述

<body>
    <div id="app">
        <comp-a></comp-a>
        
    </div>
    
    <template id="a">
        <div>
           <h3>组件A</h3>
           <p>{{msg}}</p>
           <comp-b></comp-b>
        </div>
    </template>

    <template id="b">
        <div>
           <h3>组件B</h3>
           <p>{{msg}}</p>
        </div>
    </template>
</body>

<script>
    const app = Vue.createApp({
        components:{ // 局部组件
            'comp-a':{  // 父组件
                template:'#a',
                data(){
                    return{
                        msg:'aaa'
                    }
                },
                components:{ //局部组件
                    'comp-b':{ //子组件 
                        template:'#b',
                        data(){
                            return{
                                msg:'bbb'
                            }
                        }
                    }

                }
            }
        }

    }).mount('#app')

</script>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <my-hello></my-hello>
        
    </div>

    <template id="hello">
        <div>
            <h2>hello父组件</h2>
            <h2>访问自己的数据: {{ msg }},{{info}},{{user.username}}</h2>
            <hr>
            <my-world :msg="msg" :info="info" :user="user"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h2>world子组件</h2>
            <h3>访问父组件数据:{{msg}},{{info}},{{user.username}}</h3>
            
        </div>
    </template>



</body>

<script>
    const app = Vue.createApp({
        components:{
            'my-hello':{ //父组件
                template:'#hello',
                data(){
                    return{
                        msg:'welcome',
                        info:'vue',
                        user:{
                            id:1001,
                            username:'admin',
                            password:'123'
                        }
                    }
                },
                components:{
                    'my-world':{ //子组件
                        template:'#world',
                        // 接收方式一
                        // props:['msg','info','user']
                        // 接收方式二
                        props:{
                            msg:String,
                            info:{
                                type:String,
                                default:'csdn'
                            },
                            user:{
                                type:Object
                            }
                        }

                    }
                }
            }
        }

    }).mount('#app')

</script>

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <my-hello></my-hello>

    </div>

    <template id="hello">
        <div>
            <h2>hello父组件</h2>
            <hr>
            <my-world  @e-data="get"></my-world>
            <h2>访问子组件数据：{{sex}}</h2>
        </div>
    </template>

    <template id="world">
        <div>
            <h2>world子组件</h2>
            <h2>访问自己的数据:{{sex}}</h2>
            <button @click="send">将子组件的数据传递给父组件</button>
        </div>
    </template>


</body>

<script>
    const app = Vue.createApp({
        components: {
            'my-hello': { //父组件
                template: '#hello',
                data() {
                    return {
                        sex:null
                    }
                },
                methods: {
                    get(sex) {
                        this.sex = sex

                    }
                },
                components: {
                    'my-world': { //子组件
                        template: '#world',
                        data() {
                            return {
                                sex: 'male'
                            }
                        },
                        methods:{
                            send(){
                                // 使用$emit() 触发一个自定义事件
                                this.$emit('e-data',this.sex)
                            }
                        }


                    }
                }
            }
        }

    }).mount('#app')

</script>

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <button @click="flag='CompA'">组件A</button>
        <button @click="flag='CompB'">组件B</button>
        <button @click="flag='CompC'">组件C</button>
        <hr>
        <component :is="flag"></component>

    </div>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                flag:'CompA'

            }
        },
        components:{
            CompA:{
                template:'<h3>组件A</h3>'
            },
            CompB:{
                template:'<h3>组件B</h3>'
            },
            CompC:{
                template:'<h3>组件C</h3>'
            },
        }
    }).mount('#app')
</script>

在这里插入图片描述

在这里插入图片描述

默认情况下点击A组件，A组件会被创建，点击B组件创建B组件的同时销毁A组件

<body>
    <div id="app">
        <button @click="flag='CompA'">组件A</button>
        <button @click="flag='CompB'">组件B</button>
        <button @click="flag='CompC'">组件C</button>
        <hr>

        
            <component :is="flag"></component>
        
    </div>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                flag:'CompA'

            }
        },
        components:{
            CompA:{
                template:'<h3>组件A</h3>',
                created(){
                    console.log('组件A-------created')
                },
                unmounted(){
                    console.log('组件A-------unmounted')
                }
            },
            CompB:{
                template:'<h3>组件B</h3>',
                created(){
                    console.log('组件B-------created')
                },
                unmounted(){
                    console.log('组件B-------unmounted')
                }
            },
            CompC:{
                template:'<h3>组件C</h3>',
                created(){
                    console.log('组件C-------created')
                },
                unmounted(){
                    console.log('组件C-------unmounted')
                }
            },
        }
    }).mount('#app')
</script>

在这里插入图片描述

缓存组件不会销毁切换之前的组件

<keep-alive>
            <component :is="flag"></component>
        </keep-alive>

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <comp-a>
            <p>111</p>
        </comp-a>
        <hr>
        <comp-a>
            <p>222</p>
        </comp-a>
    </div>

    <template id="a">
        <div>
            <h3>组件A</h3>
        <slot></slot>
        </div>

    </template>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                flag:''

            }
        },
        components:{
            'comp-a':{
                template:'#a'
            }
        }
    }).mount('#app')
</script>

在这里插入图片描述

季布，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件化开发思考
08-28
主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
vue组件化编程-todoList案例.zip
07-14
vue组件化编程-todoList案例.zip
Vue风格指南
sinat_37680470的博客
08-22 269
闲来无事看了下Vue风格指南，才发现自己以前有好多写法或者用法上的错误，在这里记录下平时没有注意到或者不知道的一些东西，本文全部摘自Vue官方文档 1.组件名应为多个单词，防止与HTML发生冲突 Vue.component('todo-item', { }) 2.组件中的data必须是一个函数，防止在组件复用的时候数据变动产生关联 export default { data ...
vue中同一个页面多次复用同一个组件的相互干扰问题
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
v-show条件渲染
xiaoxingxingzai的博客
08-27 2975
v-show条件渲染 1.另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 值0也表示false，其他数值表示true。 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 <t...
vue封装的echarts组件多次被同一个页面调用出现的问题
LisaWwwang的博客
03-27 3534
当我们在封装了echarts组件之后，需要在同一个页面中引入多次时，会出现数据覆盖等一系列问题 当时我是修改了id也无济于事，达不到我需要的效果 解决方案 其实很简单，修改一点就好了，将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分 <template> <div> <div class="echarts my-echarts" ref=...
【Vue】同一个页面多次复用同一个组件数据相互干扰问题
qq_45677671的博客
10-13 3221
同一个页面多次复用同一个组件数据相互干扰问题
Vue 组件互相调用产生冲突问题的解决
weixin_44617133的博客
10-26 2022
vue组件互相调用
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 4478
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。
vue 组件多开，数据被覆盖问题排查及解决方案
Yseventeen
06-21 2934
vue-route详情页面多开时，前面的页面数据被新开的页面数据覆盖了。详情页面的路由，使用动态路由匹配。
Vue子组件被同一个页面多次调用而引发的性能问题
LuckyWinty的博客
12-21 939
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群最近做的Vue2项目中，都涉及到一种场景，那就是一个组件（下称子组件）被同一个页面（下称父组件）多次调用。本来以为这个场景没啥，但是在实际做的过程，发现还是有必要注意一下的。需要注意的点在于：子组件在其生命周期中是否进行了接口请求，如果进行了接口请求，那子组件被父组件调用了几次，那这个接口就会被请求了几次。如果子组件每次被调用时请求的是不同...
vue组件化.zip
04-17
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
Vue组件化开发
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官 方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三 方组件的使用、手把手带你打造自己的表单组件、Vue核心插件...
vue封装echarts组件，同一个页面多次调用后者被覆盖问题
weixin_43503730的博客
07-09 1028
vue封装echarts组件，同一个页面多次调用后者被覆盖问题 在同一个页面多次调用封装的 echarts 组件，会出现后者的调用把前者的调用覆盖的情况，只要将获取 dom 元素的方式换成 ref 方式即可 为 ECharts 准备一个具备大小（宽高）的 DOM <div id="chart" style="width: 600px;height:400px;"></div> 修改为： <div ref="chart" style="width: 600px;height
vue 同一页面多次引用同一组件
热门推荐
ting0712的博客
11-03 1万+
vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖) 1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件; 2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据; 3:解决问题的关键: //1.-----页面调用子组件,实例化两个 //第一处调用子组件 <pagination @get-list="getpagequery" :...
vue中一个页面引入多个相同组件重复请求的问题？
qq_43631129的博客
11-15 1584
vue中一个页面引入多个相同组件重复请求的问题？
vue 一个页面多次使用同一个组件,传值问题
小姐姐
11-30 4542
a
Vue组件复用问题的一个解决方法
心有谦谦结
03-17 9767
在vue中，如果路由指向的页面组件是同一个，那么路由出口显示的页面组件就不会被重新渲染。
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 343
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
vue组件化开发规范
08-29
Vue组件化开发规范是基于Web Components的思想而来的。在Vue中，组件化开发可以帮助我们更好地组织和重用代码。 Vue的组件注册有两种方式：全局组件注册和局部组件注册。 全局组件注册语法是通过Vue.component...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

季布，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值