Vue组件（1）

最新推荐文章于 2024-09-09 08:15:00 发布

luckylbb

最新推荐文章于 2024-09-09 08:15:00 发布

阅读量99

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/luckylbb/article/details/106724608

版权

首先我们为什么要用到组件，通俗易懂的说就像是js中封装代码一样，某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
组件：局部和全局
一、局部
局部的组件就直接在new Vue中去写component：{
（写内容）
}
二、全局

  Vue.component（“自己取名（根据规则）”，{
 props:后面可以是数组也可以是对象，一般做限制的时候会用对象。一般外面传进来的值需要用到props.
 template:``(模板字符串，就相当于除了app以外的其余的框架)
 }）

下面的这个代码的输出为hi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <div id="app">
    <aaa nickname="hi"></aaa>
    
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        Vue.config.productionTip = false//不去提示
        Vue.component('aaa', {
            props:["nickname"],
            template:`<h1>{{nickname}}</h1>`
        })
        new Vue({
            el: "#app",
            data() {
                return {
                    
                }
            },
        
            methods:{
            
            }
        })
    </script> 
</body>
</html>

下面的代码输出的是你好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <div id="app">
    <aaa></aaa>
    
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        Vue.config.productionTip = false//不去提示
        Vue.component('aaa', {
            template:`<h1>你好</h1>`
        })
        new Vue({
            el: "#app",
            data() {
                return {
                    
                }
            },
        
            methods:{
            
            }
        })
    </script> 
</body>
</html>