Vue组件

ゝ一世哀愁。 2021-07-24 23:50 632阅读 0赞

# Vue组件 #

## 1. 什么是组件 ##

1.  组件的概念：组件即自定义控件，是Vue.js最强大的功能之一
2.  组件的用途：组件能够封装可重用代码，扩展html标签功能
3.  组件的本质：自定义标签

## 2. 组件的分类 ##

1.  全局组件：不同作用域内均可使用
2.  局部组件：只在定义该组件的作用域内使用

## 3. 全局组件 ##

1.  建议：组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
2.  *语法:*

Vue.component('name', {
         	   template: '<div></div1>'
    });

1.  定义位置：创建实例前定义全局组件
2.  template的设置：
    
     *  template：‘html代码’
     *  template：’\#template1’引用template内容
3.  全局组件的定义  
    数据的定义：

data：function(){           
    	return {a:1,b:2}
    }

函数的定义：

methods:{
        函数名：function(){}
    }

1.  全局组件的调用
    
     *  组件的调用方法：<组件名></组件名>
     *  组件的作用域：全局范围内均可调用
2.  小结
    
     *  组件中数据的定义：需以函数返回值的形式定义数据
     *  组件的调用：组件本质为标签，调用方式与调用标签相同  
        案例:

<div id="demodiv">
        <tema></tema>
    </div>
    <template id="tema">
        
        <div>
            <h1 @click="fun()">{
       {text}}</h1>
            <p>{
       {text}}</p>
        </div>
    </template> 
    <script>
        Vue.component("tema",{
            template:"#tema",
            data(){
                return {
                    text:"这是一个全局组件的测试text"
                }
            },
            methods:{
                fun(){
                    console.log("这是全局组件内运行的函数");
                }
            }
        })
    
        new Vue({
            el:"#demodiv",
            data:{
    
            },
            methods:{
    
            }
        })
    </script>

## 4. 局部组件 ##

1.  局部组件的定义

*  语法：定义在vue实例中只能在当前实例范围内生效  
    案例：

new Vue({
        el:"#demodiv",
        data:{},
        methods:{},
        components:{
            "con":{
                template:"#tema",
                data(){
                    return {
                        text:"这是局部组件的测试text"
                    }
                },
                methods:{
                    fun(){
                        alert("这是局部组件的函数");
                    }
                }
            }
        }
    })

1.  定义位置：实例配置项中定义

*  template的设置：
    
     *  template：‘html代码’
     *  template：’\#template1’

1.  数据的定义：

data：function(){
    	return {a:1,b:2}
    }

1.  局部组件的调用：
    
    1.  调用的方法：<组件名>< /组件名>
    2.  组件的作用域:定义该组件的作用域内可调用
    3.  组件在命名时如果是驼峰命名法 那么在调用的时候用-替代大写 “myText”调用< my-text></ my-text>
2.  小结
    
    1.  组件中数据的定义：需以函数返回值的形式定义数据
    2.  组件的调用：组件本质为标签，调用方式与调用标签相同  
        案例：

<div id="demodiv">
        <con></con>
    </div>
    <template id="tema">
        <div>
            <h1 @click="fun()">{
       {text}}</h1>
            <p>{
       {text}}</p>
        </div>
    </template>  
    <script>
        new Vue({
            el:"#demodiv",
            data:{},
            methods:{},
            components:{
                "con":{
                    template:"#tema",
                    data(){
                        return {
                            text:"这是局部组件的测试text"
                        }
                    },
                    methods:{
                        fun(){
                            alert("这是局部组件的函数");
                        }
                    }
                }
            }
        })
    </script>

## 5. 组件高级 ##

### 1. props 选项 ###

1.  props 选项的作用:props选项用来声明它期待获得的数据
2.  props 本质：props 为元素属性

### 2. props 的声明 ###

1.  语法：如果是驼峰命名法需要把大写转小写前面加-
    
     *  js中：props:\[‘message1’, 'messAge2\]
     *  HTML中：<组件 message='val’mess-age2=‘val’></组件>

### 3. props 的使用 ###

1.  与 data 一样，props 可以用在模板中
2.  可以在 vm 实例中像 this.message 这样使用

#### 4. props 验证常见问题 ####

*为什么写的没有错但是没有错误提示？*  
**生产版本也就是压缩版的文件删除了警告，所以使用非压缩版的js文件就可以看到错误**  
案例：

<div id="demodiv">
        <con text="这是porps的测试"></con>
        <con text="这还是props的测试"></con>
    </div>
    <template id="tema">
        <div>
            <h1>测试:{
       {text}}</h1>
            <p></p>
        </div>
    </template>
     new Vue({
        el:"#demodiv",
        data:{},
        methods:{},
        components:{
            "con":{
                template:"#tema",
                // props:期待外部传值，并且在组件内部显示
                //props书写在组件中，并且使用数组进行表示（默认情况下props中的变量没有值）
                props:["text"]
            }
        }
    })

props传入变量：

<div id="demodiv">
        <con v-bind:text="num1"></con>
        <con :text="num2"></con>
    </div>
    <template id="tema">
        <div>
            <p>{
       {text}}</p>
        </div>
    </template>
    // props:期待外部传值  并且在组件内部展示
    // props书写在组件中 并且使用数组进行表示（默认情况下props中的变量没有值）
    
    new Vue({
        el:"#demodiv",
        data:{
                num:"我是实例中的数据1",
                numb:"我是实例中的数据2"
        },
        methods:{
    
        },
        components:{
            "con":{
                template:"#tem",
                props:["text"]
            }
        }
    })