VueJS 之 “组件篇“（二）

| 全局、局部组件
| 数据传递（props、组件通信、slot）
| props、sync双向绑定、once单次绑定
| 组件之间通信，$dispatch() 派发事件、 $broadcast() 广播事件，事件向下传导给所有后代
| slot 内容分发
| 组件是Vue的最强大功能之一，组件可以扩展html元素，封装可复用代码

全局组件

全局组件在任何组件内都可以调用，无需引用或通过component加载

main.js

    // 定义一个全局的组件
    var myComponent = Vue.extend({
        template: '<div> 组件已经渲染出来 </div>'
    })

    // 全局注册
    Vue.component('crm-component', myComponent);

    let vm = new Vue({
        ...
    }}


main.vue 子组件

    <templte>
        <div class="welcome">
            <h1>视图列表页面</h1>
            <crm-component></crm-component>            <!-- 调用 -->
        </div>
    </template>

局部组件

必须使用components对象来引用组件

<div id="appA">
    <User></User>
</div>

<script>
    import User import './user';

    var vmA = new Vue({
        el: "#appA",
        components: {        // 局部的写法
            User
        }
    })
</script>

————— 父与子组件之间的数据传递 —————

props

父组件将数据传给子组件通过props，子组件通过自定义事件$on、$emit来挂参数传递给父组件

一、props

    <div id="app">
        <!-- 这里的两个属性值通过props传到组件中 -->
        <component-parent my-name="siguang" my-age='33'></component-parent>
    </div>

    <script>
        var componentCrm = Vue.extend({
            props: ['myName', 'myAge'],
            template: '<h2>{{ myName }} {{ myAge }}</h2>'
        })

        var vm = new Vue({
            el: '#app',
            components: {
                'component-parent': componentCrm
            }
        })
    </script>

    注意: my-name="siguang" 自定义属性以“-”分割

         props: ['myName', 'myAge']        // props 定义的必须以驼峰形势


二、props动态值

    parent.vue:

        <div id="app">
            <child-component :user-name="uname"></child-component>
        </div>

        <script>
            import childComponent from 'childComponent.vue';

            export default{
                data(): {
                    return{
                        uname: 'siguang'
                    }
                },
                components:{
                    childComponent
                }
            }
        </script>


    childComponent.vue:

        <div>
            {{ userName }}        <!-- siguang -->
        </div>

        <script>
            export default{
                propos: ['userName'],
            }
        </script>


三、once 将渲染的结果缓存

    不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来

    <div id="app">
        <component-parent></component-parent>
    </div>

    <script>

        var childrenComponent = Vue.extend({
            template: '<div v-once>'+
                '<h3>这里是子组件的内容: {{ myMsg }}</3>'+
                '<p>这里输入不会影响父组件: <input type="text" v-model="myMsg" /></p>'+
                '</div>',
            data: function(){
                return {
                    myMsg: ''
                }
            },
            props: ['myMsg']
        })

        var parentComponent = Vue.extend({
            template: '<div v-once>'+
                '<p><input text="text" v-model="msg"></p>'+
                '<p>父组件的值 {{ msg }}</p>'+
                '</div>'+
                '<childen-component v-bind:my-msg.once="msg"></childen-component>',
            data: function(){
                return {
                    msg: '这里值只传给子组件一次'
                }
            },
            components: {
                'childen-component': childrenComponent
            }
        })

        var vm = new Vue({
            el: '#app',
            components: {
                'component-parent': parentComponent
            }
        })
    </script>

组件之间通信

props是单向数据流父向子组件传递数据，子向父组件传递可以通过自定义事件来处理

$on(eventName) 监听事件    、$emit(eventName) 触发事件

一、子向父组件发消息

    parent.vue: 

        <template>
            <div class="login">
                <div class="parent-box">
                    <p>显示子组件数据: {{ childrenText }}</p>
                </div>
                <children-component ref="childrenRef" v-on:showChildrenVal="childrenVal"></children-component>
            </div>
        </template>

        <script>
            import ChildrenComponent from './children.vue'
            export default{
                data(){
                    return {
                        childrenText: ''
                    }
                },
                methods:{
                    childrenVal(val){
                        this.childrenText = val;
                    }
                },
                components:{
                    ChildrenComponent
                }
            }
        </script>

    children.vue:

        <template>
            <div class="children" style="padding-top: 50px; border-top: 1px #ccc solid">
                <p><input type="text" v-model="childrenInp" id=""></p>
                <p><input type="button" @click="toParentData" value="提交到父组件中"></p>
            </div>
        </template>

        <script>
            export default{
                data(){
                    return {
                        childrenInp: ''
                    }
                },
                methods:{
                    toParentData(){
                        this.$emit("showChildrenVal", this.childrenInp);
                    }
                }
            }
        </script>


二、父向子发消息

    parent.vue:

        <template>
            <div class="login">
                <div class="parent-box">
                    <p><input type="text" name="" v-model="inputParent" ><br></p>
                    <p><input type="button" value="值传给父组件" @click="sendChildren"><br></p>
                    <p>显示子组件数据: {{ childrenText }}</p>
                </div>

                <children-component ref="childrenRef"></children-component>
            </div>
        </template>

        <script>
            import ChildrenComponent from './children.vue'
            export default{
                data(){
                    return {
                        inputParent: '',
                        childrenText: ''
                    }
                },
                methods:{
                    sendChildren(){
                        this.$refs.childrenRef.$emit('showText', this.inputParent);        // 也可以用props
                    }
                },
                components:{
                    ChildrenComponent
                }
            }
        </script>


    children.vue:

        <template>
            <div class="children" style="padding-top: 50px; border-top: 1px #ccc solid">
                这里是父组件传递的值: {{transmitVal}}
            </div>
        </template>

        <script>
            export default{
                created(){
                    this.$on('showText', function(val){
                        this.transmitVal = val;
                    })
                },
                data(){
                    return {
                        transmitVal: ''
                    }
                }
            }
        </script>


三、v-ref 直接访问到组件

    <div id="app">
        <span ref="msg"> hello </span>
        <span ref="other-msg"> world </span>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                someProp: 'idName',
                otherProp: 'prop'
            }
        })

        console.log(vm.$refs.msg.textContent);        // hello
        console.log(vm.$refs.otherMsg.textContent);    // world
    </script>

slot 分发内容

parent.vue:
    <template>
        <div class="login">
            <children-component>
                <h1 slot="header">这里可能是一个页面标题</h1>
                <div class="tag">
                    这里是没有定义slot名称走的默认的slot
                    <div class="tag-til">标题</div>
                    <div class="tag-content">内容部分</div>
                </div>
            </children-component>
        </div>
    </template>

children.vue:
    <template>
        <div class="children">
            <slot name="header"></slot>
            <slot></slot>
        </div>
    </template>

组件化的css

可以通过scoped属性来控制样式是否是只在当前组件下使用

<style>
    /* 全局下的样式 */
</style>

<style scoped>
    /* 当前组件下使用的样式 */
</style>