Vue 2.X 文档阅读笔记二 (深入组件)

// vue模板
// 定义局部注册组件
let ComponentA = {
    props: [],
    template: `
        <div>aa</div>
    `
}
export default {
    components: {
        "component-a": ComponentA
    }
}

// 业务模板文件
import ComponentThr from "@/views/pages/componentTest/ComponentThr";

export default {
    components: {
        "component-thr": ComponentThr,
    }
}

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

export default {
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // or any other constructor
    }
}

// 使用v-bind直接将给定对象所有属性一次性全传到子组件的props列表中
`<my-component v-bind="arc.idObj"></my-component>`

// 等价于

`<my-component v-bind:title="arc.idObj.title" v-bind:author="arc.idObj.author"></my-component>`

<script>
export default {
    data(){
        return {
            arc: {
                idObj: {
                    title: '******',
                    author: 'nitx'
                }
            }
        }
    }
}
</script>

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

<template>
    <div class="wrap">
        <component-A v-bind="valObj"></component-A>
    </div>
</template>

<script>
let ComponentA = {
    props: {
        // 基础的类型检查 ( null 和 undefined 会通过任何类型检查 )
        propA: null,
        // Number类型
        propB: Number,
        // 多个可能的类型
        propC: [ String, Number ],
        // 必填的字符串
        propD: {
            type: String,
            require: true
        },
        // 带有默认值的数字
        propE: {
            type: Number,
            default: 666
        },
        // 带有默认值的对象
        propF: {
            type: Object,
            // 对象或数组的默认值必须从一个工厂函数中return获取
            default: function(){
                return { message: 'ok' }
            }
        },
        // 自定义验证函数
        propG: {
            validator: function( value ){
                // propG的值必须匹配下列字符串中一个
                return [ "success", "warning", "danget" ].indexOf( value ) !== -1;
            }
        }

    },
    template: `
        <div class="sub-class">
            <p>{{propA}}</p>
            <p>{{propB}}</p>
            <p>{{propC}}</p>
            <p>{{propD}}</p>
            <p>{{propE}}</p>
            <p>{{propF}}</p>
            <p>{{propG}}</p>
        </div>
    `
}
export default {
    data(){
        return {
            valObj: {
                propA: 10,
                propB: 99,
                propC: "sxm",
                propD: "nitx",
                propE: 120,
                propF: { name: "sxm" },
                propG: "warning"
            }
        }
    },
    components: {
        'component-A': ComponentA
    }
}
</script>

<style lang="scss" scoped>

</style>

// 自定义构造函数
function Fn( name, age ){
    this.name = name;
    this.age = age;
}

let ComponentA = {
    props: {
        propH: Fn
    }
}

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<template>
    <div class="wrap">
        <!-- 插槽 -->
        <div id="app-2">
            <component-B url="/setting">
                <p>访问地址是 {{url}}</p>
                <p>aaa</p>
                <template v-slot:myname>
                    sxm
                </template>
            </component-B>
        </div>
    </div>
</template>

<script>
let ComponentB = {
    props: [ "url" ],
    template: `
        <div class="sub-class">
            <p>{{url}}</p>
            <p>组件内部可以显示出访问地址：{{url}}</p>
            <slot>nitx</slot>
            <!-- 设置插槽的默认内容 -->
            <slot name="myname">nitx</slot>
        </div>
    `
}
export default {
    data(){
        return {

        }
    },
    components: {
        'component-B': ComponentB
    }
}
</script>

<template>
    <div class="wrap">
        <!-- 插槽 -->
        <component-A>
            <template v-slot:header>
                <div>这是页面头部</div>
            </template>
            <template v-slot:default>
                <div>这是页面主体内容</div>
            </template>
            <template v-slot:footer>
                <div>这是页面底部</div>
            </template>
        </component-A>
    </div>
</template>

<script>
let ComponentA = {
    props: [],
    template: `
        <div class="sub-class">
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
    `
}
export default {
    data(){
        return {

        }
    },
    components: {
        'component-A': ComponentA
    }
}
</script>

<template>
    <div class="wrap">
        <component-A :user="myUser">
            <template v-slot:default="slotProps">
                // slotProps 就是 包含所有插槽prop的对象 的名字
                {{slotProps.user.firstname}}
            </template>
        </component-A>
    </div>
</template>

<script>
let ComponentA = {
    props: {
        user: Object
    },
    template: `
        <div class="sub-class">
            // 为slot元素绑定插槽prop特性
            <slot v-bind:user="user">
                {{user.lastname}}
            </slot>
        </div>
    `
}
export default {
    data(){
        return {
            myUser: {
                firstname: 'nitx',
                lastname: 'sxm'
            },
        }
    },
    components: {
        'component-A': ComponentA
    }
}
</script>

<template>
    <div class="wrap">
        <!-- 点击不同按钮切换不同组件，并缓存组件状态 -->
        <button type="button" v-for="( val, index ) in btnArr" :key="index" :data-index="index" @click="changeComponent">{{val.btnText}}</button>
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>
    </div>
</template>

<script>
let ComponentA = {
    props: [ "text" ],
    data(){
        return {
            liArr: [
                { liName: '1' },
                { liName: '2' },
                { liName: '3' },
            ],
            divCont: [
                {content: "aaaa"},
                {content: "bbbb"},
                {content: "cccc"}
            ],
            indexVal: 0
        }
    },
    template: `
        <div class="sub-class">
            <ul>
                <li v-for="(val,index) in liArr" :key="index" :data-index="index" @click="changeLi">{{val.liName}}</li>
            </ul>
            <div>
                {{ divCont[indexVal] }}
            </div>
        </div>
    `,
    methods: {
        changeLi( e ){
            let dataIndex = parseInt( e.target.dataset.index );
            this.indexVal = dataIndex;
        }
    }
}
let ComponentB = {
    props: [ "text2" ],
    template: `
        <div class="sub-class">
            <div>
                <p>add</p>
                <slot>{{text2}}</slot>
            </div>
        </div>
    `
}
export default {
    data(){
        return {
            btnArr: [
                { btnText: 'btn1' },
                { btnText: 'btn2' },
            ],
            currentComponent: 'component-A'
        }
    },
    components: {
        'component-A': ComponentA,
        'component-B': ComponentB
    },
    methods: {
        changeComponent( e ){
            let dataIndex = parseInt( e.target.dataset.index );
            console.log( dataIndex );
            if( dataIndex === 1 ){
                this.currentComponent = 'component-B';
            }else if( dataIndex === 0 ){
                this.currentComponent = 'component-A';
            }
        }
    }
}
</script>