美文网首页
vue组件三大核心概念

vue组件三大核心概念

作者: 没了提心吊胆的稗子 | 来源:发表于2019-06-06 22:25 被阅读0次

    属性

    1. 自定义属性props
      Prop 可以在组件上注册一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。 在写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值。
    // 父组件
     <props name='属性'
            :type='type'
            :title="title"
            :list="list"
            :content="content"
      </props>
    //子组件
    props: {
    
        name: String,
        type: {
    //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告
          validator: (value) => {
            return ['success', 'warning', 'danger'].includes(value)
          }
        },
        list: {
          type: Array,      
          // 对象或数组默认值必须从一个工厂函数获取      
        default: () => []
        }
      },
    title: {
      type: String,
      default: 'test'
    }
    

    data和props的区别
    相同点:都可以存放各种类型的数据,并且所有行为操作和模板渲染的数据都会同步发生变化
    不同点
    在各自实例中,在任何情况下,我们都可以随意改变data的数据类型和数据结构,不会被任何环境所影响。
    在各自实例中,一旦在初始化被定义好类型时,在数据传递时不能改变props的数据类型,而且不允许在子组件中直接操作传递过来的props数据,而是需要通过别的手段,改变传递源中的数据。

    事件

    数据驱动
    Vue的一个核心思想是数据驱动,指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据 即MVVM模式
    用户执行某个操作 -> 反馈到 VM 处理(可以导致 Model 变动) -> VM 层改变,通过绑定关系直接更新页面对应位置的数据

    插槽

    插槽就是Vue实现的一套内容分发的API,将<slot></slot>元素作为承载分发内容的出口。简单来说就是在子组件中预先留出一个位置,内容填什么由父组件来决定。
    1) 具名插槽:就是给插槽起一个具体的名字, 而slot属性对应的内容都会和组件中name一一对应,不起名字就是默认插槽

    <div id="app">
        <child-component>
            <template slot="cat">
                优雅、萌宠
            </template>
            <template slot="dog">
                忠实、蠢萌
            </template>
            <div>
                动物
                默认的插槽
            </div>
        </child-component>
    </div>
    <script>
        Vue.component('child-component',{
            template:`
                <div>
                <h4>动物中有狗和猫</h4>
                <slot name="cat"></slot> 
                <slot name="dog"></slot>
                <slot></slot>
                </div>
        })
        let vm = new Vue({
            el:'#app',
            data:{
            }
        })
    </script>
    
    1. 作用域插槽
      简单来说就是子组件可以在slot标签上绑定属性值,而父组件可以拿到这些数据,如:
    //子组件中
    <slot :userName="li"></slot>
    //父组件通过slot-scope绑定的对象拿到userName的值
    <template>
        <section>
            <child>
                <template slot-scope="scope">
                    <div>{{scope.userName}}</div>
                </template>
            </child>
        </section>
    </template>
    

    使用场景:在列表组件使用作用域插槽,,既可以复用子组件的slot,又能使slot的内容不一致

    相关文章

      网友评论

          本文标题:vue组件三大核心概念

          本文链接:https://www.haomeiwen.com/subject/yzcpxctx.html