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

链接到路由配置

你可能感兴趣的:(vue组件的详细介绍)