vue组件的详细介绍

核心目标

为了可重用性高，减少重复性开发，我们可以按照template、style、script的拆分方式，放置到对应的.vue文件中。

组件概括

vue组件可以理解为预先定义好的ViewModel类。一个组件可以预定义很多选项，最核心的有：

1. 模板template：模板反映了数据和最终展现给用户的DOM之间的映射关系，
2. 初始数据data：一个组件的初始数据状态，对于可重复的组件来说，通常是私有的状态。
3. 接收的外部的参数（props）：组件之间通过参数来进行数据的传递和共享，参数默认是单项绑定，但也可以显示声明为双向绑定。
4. 方法（methods）：对数据的改动操作一般都在组件内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
5. 生命周期函数（钩子函数）：一个组件会触发多个生命周期函数，在这些钩子函数中可以封装一些自定义逻辑。可以理解为controller的逻辑被分散到了这些钩子函数中。

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

（组件名不要带有大写字母，多个单词使用中划线my-dom）

• 全局组件
  （直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。）
  （一般写插件的时候全局组件使用多一些）

 Vue.component('mycomponent',{      //自定义组件名mycomponent
    template: `
这是一个自定义组件
`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

• 局部注册组件
  使用三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件；

       //3.组件的使用
        //3.组件的使用

• 模板的要求：组件的模板只能有一个根元素。

template: `

                元素1.....
                元素2.....
                元素3.....
           
`,

• 组件中的data必须是函数。

data:function(){
            return {'aaa':'bbb'}//template中可以使用aaa
        },

• 组件的属性props。
  Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

    动态操作属性：name是变量（读取实例中data的值）
    


    静态的属性：name是常量（就是name）
    

渲染结果

props.png

• props的验证。

组件之间的通信

子组件给父组件传递数据，利用事件的订阅发布模式

• 1.给子组件的template上的元素绑定事件（如click），执行子组件的方法（如changeData），子组件的方法中发射一个事件（如s），传一个数据（如lalala）；
• 2.父组件中，定义一个方法（如getData）用来拿到子组件的数据。
• 3.在自定义的组件上绑定子组件传过去的事件（s），执行事件（s）执行的是getData函数，getData函数中拿到数据（data，就是子组件传过去的lalala）。

父组件给子组件传递数据(利用props属性)

数据同步（子组件的数据和父组件保持一致）

数据同步的核心：父组件给子组件传递“引用数据类型的数据”；

数据不同步(不直接使用父组件传的值，用data属性再自己的组件内做一个中间变量，防止报错)

组件切换

js动态控制template（也可以用is属性控制）

    

        
显示组件1
        
显示组件2
    
    
    

插槽（slot官网有详细介绍）

slot相当于子组件设置了一个地方，如果在调用它的时候，往它的开闭标签之间放了东西，那么它就把这些东西放到slot中。

1. 当子组件中没有slot时，父组件放在子组件标签内的东西将被丢弃；
2. 子组件的slot标签内可以放置内容，当父组件没有放置内容在子组件标签内时，slot中的内容会渲染出来；
3. 当父组件在子组件标签内放置了内容时，slot中的内容被丢弃
   实例：

    //使用组件
        lalalala
        
        
1111111111111
        
2222222222222
    

链接到路由配置