Vue组件

Vue组件

1. 什么是组件

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

2. 组件的分类

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

3. 全局组件

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

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

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

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

函数的定义：

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

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

<div id="demodiv">
    <tema></tema>
</div>
<template id="tema">
    <!-- 如果template组件内有多条html，那么就必须要一个父元素将他们包起来 -->
    <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("这是局部组件的函数");
                }
            }
        }
    }
})

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

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

3. 数据的定义：

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

4. 局部组件的调用：
   1. 调用的方法：<组件名>< /组件名>
   2. 组件的作用域:定义该组件的作用域内可调用
   3. 组件在命名时如果是驼峰命名法 那么在调用的时候用-替代大写 “myText”调用< my-text></ my-text>
5. 小结
   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"]
        }
    }
})