一切都是浮云

# 组件基础

组件是指可以重复利用的控件，这极大的提高了开发效率。

组件可以细分为全局组件和局部组件，全局组件通常是指能在多处可以重复使用的组件，也就是使用频率非常高的组件，我们封装为全局组件，这样要方便。

# 全局组件

# 创建组件注意事项

  1. 需要给组件取一个名字，注意不要和系统组件冲突比如nav，推荐取名加上前缀，例如gx-nav。

  2. 组件的配置最少需要一个模板template

  3. 组件模板中必须要一个根元素，否则报错，像下面的代码就是错误的，因为没有根元素，套上一个根元素即可。

    template: `
        <h2>我是导航组件</h2>
        <p>段落</p>
    `

  1. 组件中的data属性它是一个函数，并且这个函数一定要返回一个对象，特别注意和vue实例中的data区分开来，下面是正确的data写法。

  2. 每一个组件都有独立的作用域，组件内部的变量互不影响。

Vue.component('gx-nav',{
    template: `
        <h2>我是导航组件</h2>
        <p>段落</p>
    `,
    data: function(){
        return {
            msg: '张三'
        }
    }
})

<div id="root">
    <gx-nav></gx-nav>
    <gx-nav></gx-nav>
</div>

<script>
//1.创建一个全局组件
Vue.component('gx-nav',{
    template: `
        <h2>我是导航组件</h2>
        
    `
})


//2.注册一个控制模块
var root = new Vue({
    el: '#root'
})
</script>

# 通过 Prop 向子组件内部传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

语法：

<gx-nav active="0" title="导航"></gx-nav>

简单示例：

<div id="root">
    <blog-post title="文章标题"></blog-post>
</div>

<script>
Vue.component('blog-post', {
    props: ['title'],//props 选项将其包含在该组件可接受的 prop 列表中
    template: '<h3>{{ title }}</h3>'
})

var root = new Vue({
    el: '#root'
})
</script>

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

特别注意：vue规定组件内部不能改写通过props传进来的数据，会报警告错误

# 通过 $emit 向组件外部发送消息

通过$emit可以由组件内部向组件外部发送消息

this.$emit('myEvent',参数1,参数2);

简单示例

# 自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

# .sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

# 局部组件

我们的vue实例属性当中有一个components属性，在这个属性中扩展的组件，是局部组件。

//全局组件，全局组件可以使用在其他vue实例中，或者子组件中。
Vue.component('gx-nav',{
    template:`<h2>全局组件</h2>`
})

//局部组件，只能使用在指定注册的组件内部
var root = new Vue({
    el:'#root',
    components:{
        'gx-nav': {
            template:`<h2>局部组件1</h2>`
        },
        'gx-page': {
            template:`<h2>局部组件2</h2>`
        }
    }
})

上面的组件写法通常改进为

//局部组件
var GxNav = {
    template:`<h2>导航组件</h2>`
}

//局部组件
var GxPage = {
    template:`<h2>分页组件</h2>`
}

var root = new Vue({
    el:'#root',
    components:{
        GxNav,
        GxPage
    }
})

局部组件不能直接应用在模板中，必须需要你在需要应用的组件内部components属性内部注册一下。

{
    components: {
        ComA,
        ComB
    }
}

全局组件可以再任何局部组件中使用 局部组件使用其他局部组件，必须导入组件，然后注册该组件才能使用

# 使用系统总线通讯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
<div id="root">

    <gx-list></gx-list>
    <hr>
    <gx-page></gx-page>

</div>

<script>
//1. 建立数据总线
var bus = new Vue();

//2. 列表组件
Vue.component('gx-list',{
    template:`
    <div>
        <h2>我是列表组件</h2>
        <button @click="send">发送消息给分页组件</button>  
        <h3>接收来自分页组件的消息：</h3>  
    </div>
    `,
    methods: {
        send(){
            bus.$emit('msg', '张三', 30);
        }
    },
    mounted(){
        //挂载之后发送
        bus.$emit('msg', '张三', 30);
    }
})

//3. 分页组件
Vue.component('gx-page',{
    template:`
    <div>
        <h2>我是分页组件</h2>
        <button>发送消息给类表组件</button>  
        <h3>接收来自列表组件的消息：{{name}} {{age}}</h3>  
    </div>
    `,
    data(){
        return {
            name: '-',
            age: '-'
        }
    },
    created(){
        //已创建接收
        bus.$on('msg',( name, age ) => {
            this.name = name;
            this.age = age;
        })
    }
})

var root = new Vue({
    el:'#root'
})
</script>


</body>
</html>

← Vue 实例 →