Vue: 组件

组件是可复用的 Vue 实例，且带有一个名字

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

- data必须是函数
- 没有el属性

全局组件 ,不用注册

<div id="app">
    <!--组件应用-->
    <zujianming></zujianming>
</div>


<script>

    // 创建组件
    Vue.component('zujianming',{
       template:`
       <h1>{{huanying}}</h1>
       `,
        data(){
           return{
               huanying:'hello vue'
           }
        }
    });

    // 创建根实例
    new Vue({
        el:'#app'
    })


</script>

 

局部组件,需要注册, 

components:{}

<style>
        .box{
            width: 50px;
            height: 50px;
            background-color: #5cb85c;
        }
    </style>



<div id="app">
    <!--组件应用-->

</div>


<script>

    // 创建组件
    let Header = {
        template:`
        <div class="box">
            <h1>{{ huanying }}</h1>
        </div>
        `,
        data(){
            return{
                huanying:"hello vue"
            }
        }
    }


    let App = {
        template:`
        <Header></Header>
        `,
        components:{
            'Header':Header,
        }


    };

    // 注册组件
    new Vue({
        el:'#app',
        template:'<App></App>',
        components:{
            App,
        }
    })


</script>

 

父子组件通信 props:[]

<div id="app">
    <!--组件应用-->

</div>


<script>

    // 创建局部组件
    let Header = {
        template: `
        <div>
            <h2>{{greeting}}</h2>
            <h3>{{fDate}}</h3>
        </div>
        `,
        props: ['fDate'],
        data() {
            return {
                greeting: "局部组件的文字",
            }
        },
    };


    // 入口组件
    let App = {
        template:`
        <div>
            <page-header v-bind:fDate="fatherData"></page-header>
        </div>
        `,
        components:{
            "page-header":Header,
        },
        data(){
            return{
                fatherData:'这是父组件传过来的'
            }
        }
    };
    
    // 注册组件
    new Vue({
        el:'#app',
        template:`
        <App></App>
        `,
        components:{
            App,
        },
    })

</script>

 

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

子父组件通信

<script>

    // 创建局部组件
    let Header = {
        template: `
        <div>
            <button @click="sonClick">点击放大----</button>
        </div>
      `,
        methods: {
            sonClick: function () {
                this.$emit('change-size', 0.1);
            }
        }
    };

    // 入口组件
    let App = {
        template: `
        <div>
            <span :style="{ fontSize:postFontSize + 'cm'}">@_@</span>
            <my-header v-on:change-size="fatherClick"></my-header>
        </div>
        `,
        components: {
            "my-header": Header,
        },
        data(){
            return{
                postFontSize:1
            }
        },
        methods:{
            fatherClick:function () {
                this.postFontSize++;
            }
        }
    };

    // 注册组件
    new Vue({
        el: "#app",
        template: `<App></App>`,
        components: {App,},
    })


</script>

 

组件混入 mixins

mixins:[组件名],

<script>

    // 创建局部组件
    let mixs = {
        methods: {
            show: function (name) {
                console.log(name + '来了');
            },
            hide: function (name) {
                console.log(name + '来了')
            },
        },
    };

    let tag1 = {
        template:`
        <div>
            <button @click="show('皇上')">点击此处有惊喜</button>
            <button @click="hide('皇后')">点击此处有惊喜</button>
        </div>
        `,
        mixins:[mixs],
    }

    // 注册组件
    new Vue({
        el: "#app",
        components:{
            'tag':tag1
        },
    })
    
</script>

 

组件插槽 : <slot></slot>

<div class="box"><slot></slot></div>

<style>
        .box {
            width: 150px;
            height: 50px;
            background-color: #5cb85c;
            margin-bottom: 2px;
            text-align: center;
        }
    </style>


<div id="app">
    <!--组件应用-->
    <zujianming>首页</zujianming>
    <zujianming>课程</zujianming>
    <zujianming>联系我们</zujianming>
    <zujianming>地址</zujianming>

</div>


<script>

    Vue.component('zujianming',{
        template:`
        <div class="box"><slot></slot></div>
        `
    });

    new Vue({
        el:'#app'
    })

</script>

 

组件具名插槽 : 

<style>
        .box {
            width: 150px;
            height: 80px;
            background-color: #5cb85c;
            margin-bottom: 5px;
            text-align: center;
        }
    </style>


<div id="app">
    <!--组件应用-->
    <zujianming>
        <div slot="index">主页</div>
        <div slot="course">课程</div>
        <div slot="address">地址</div>
    </zujianming>

</div>


<script>

    Vue.component('zujianming',{
        template:`
        <div class="box">
            <slot name="index"></slot>
            <slot name="course"></slot>
            <slot name="address"></slot>
        </div>
        `
    });

    new Vue({
        el:'#app'
    })

</script>