Vue组件

其他vue相关文章可以在我个人分类中的vue.js部分查看

# 目录

  ● Vue组件

  ● 全局组件 & 局部组件

  ● 一种更加推荐的构建组件方法

  ● 组件中的数据与方法

# Vue组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件化与模块化的区别：

• 模块化从代码逻辑出发，进行划分以达到职能单一的目的
• 组件化从UI角度出发，对页面进行拆分，方便相似内容的重用

# 全局组件 & 局部组件

注意：组件的命名使用 - 来连接，而不要使用驼峰命名法

全局组件

<div id="app">
    <simple-template></simple-template>
</div>
<script>
    //全局组件
    Vue.component('simple-template', {
    	//如果你想在引号中写一个复杂的模板，那么必须用一个div将他们括起来
        template: `
        	<div>
	        	<h1>这是一个最简单最简单的模板</h1>
	        	<p>hhhhh</p>
	        </div>
        `
    })
    //实例Vue
    var vm = new Vue({
        el: "#app"
    })
</script>

局部组件

<div id="app">
    <template-a></template-a>
</div>
<script>
	//局部组件
    var componentA = {
        template:`<p>这是一个局部组件A</p>`
    }
    //实例Vue
    var vm = new Vue({
        el: "#app",
        components:{
        	'component-a'=componentA
        }
    })
</script>

# 一种更加推荐的构建组件方法

不难发现，在引号中间的html代码写起来很不方便，由于没有语法提示，很容易出错，所以推荐一种更为好用的方式来构建组件。

<div id='app'></div>
<template id="com1">
	<!--组件内容-->
</template>
<script>
    //全局组件
    Vue.component('good-template', {
        template: "#com1"
    })
    //实例Vue
    var vm = new Vue({
        el: "#app"
    })
</script>

# 组件中的数据与方法

组件中的数据与Vue示例中的数据不同，需要是一个函数并且拥有默认返回对象，所以我们可以这么写

<div id="app">
    <mycom></mycom>
</div>
<template id="mycom">
    <div>
        <input type="button" value="+1" @click="addself" />
        <p>{{count}}</p>
    </div>
</template>
<script>
	Vue.component("mycom", {
		template: "#mycom",
        data() {
            return {
                count: 0
            }
        },
        methods: {
            addself() {
                this.count++
            }
        }
    })
	var vm = new Vue({
        el: "#app"
    })
</script>

# 组件传值

子组件默认无法访问到父组件中的data和method，所以需要引用props来完成传值
示例：

<div id="app">
    <!--传data-->
    <component-a :msg="msg"></component-a>
    <!--传method-->
    <component-a @show="show"></component-a>
</div>
<script>
    //局部组件
    var componentA = {
        template:`<p @click="show">这是一个局部组件--{{msg}}</p>`,
        props:['msg'],
        methods:{
            show(){
                this.$emit("show")
            }
        }
    }
    //实例Vue
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"这是一个父组件"
        },
        components:{
            'component-a':componentA
        }
    })
</script>