vue自定义组件，插槽，自定义事件

vue组件套娃

1. vue自定义组件

语法

Vue.component('自定义组件名', {
    
    
	props: ['var1', 'var2', 'var3'], //每个属性可以和页面绑定值
	template: '<p>{
    
    { var1 }}</p>' // 自定义模板 里面套html标签, 可以取属性的值
})

第一个自定义组件

<script>
    Vue.component('lover', {
    
    
        template: '<p>taylor swift - lover.mp3</p>'
    });
    let app = new Vue({
    
    
        el: "#app",
        data: {
    
    
        }
    });
</script>

<div id="app">
    <!-- 使用自定义组件模板，注意绑定了vue对象才有用 -->
    <lover></lover>
</div>

将自定义组件里面的数据写活

<script>
/* 自定义组件模板 bitqian标签 */
Vue.component("bitqian", {
    
    
    props: ['language'],
    template: '<li>{
    
    { language }}</li>'
});

let app = new Vue({
    
    
    el: "#app",
    data: {
    
    
        items: ["java", "python", "go"]
    }
});

</script>

 <!-- 获得每个item，并将items里面的每个item通过组件的language属性绑定到bitqian标签 -->
 <bitqian v-for="item in items" 
 	v-bind:language="item" v-bind:key="item.index">

 </bitqian>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件绑定值</title>

    <script src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 使用自定义组件模板，注意绑定了vue对象才有用 -->
        <lover></lover>

        <hr/>

        <!-- 获得每个item，并将items里面的每个item通过组件的language属性绑定到bitqian标签 -->
        <bitqian v-for="item in items" v-bind:language="item" v-bind:key="item.index">

        </bitqian>
    </div>

    <script>
        Vue.component('lover', {
     
     
            template: '<p>taylor swift - lover.mp3</p>'
        });

        /* 自定义组件模板 bitqian标签 */
        Vue.component("bitqian", {
     
     
            props: ['language'],
            template: '<li>{
     
     { language }}</li>'
        });

        let app = new Vue({
     
     
            el: "#app",
            data: {
     
     
                items: ["java", "python", "go"]
            }
        });
    </script>

</body>
</html>

2. 组件和插槽套娃

插槽<slot></slot>，就是一个孔，可以套vue组件
用组件套组件的方式代替普通的html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽 结合vue组件 实现模板化</title>

    <script src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 将每个item的值绑定到模板中的属性上 -->
        <my-component v-for="item in items" v-bind:language="item"></my-component>
    </div>

    <!-- 插槽的目的 为了实现代码模板化 -->
    <div id="app1">
        <!--<p>后端语言</p>
        <ul>
            <li>java</li>
            <li>python</li>
            <li>go</li>
            <li>linux</li>
        </ul>-->

        <demo-component>
            <!-- 记得绑定插槽 -->
            <demo-title slot="demo-title" v-bind:title="title"></demo-title>
            <demo-item slot="demo-item" v-for="(item, index) in items"
                       :item="item" v-bind:index="index"></demo-item>
        </demo-component>
    </div>

    <script>
    	// vue组件复习
        Vue.component('my-component', {
     
     
            props: ['language'],
            template: '<li>{
     
     { language }}</li>'
        })

        new Vue({
     
     
            el: "#app",
            data: {
     
     
                items: ['c', 'cpp', 'object-c']
            }
        })

        /* slot 插槽定义 组件通过插槽套组件 */
        Vue.component('demo-component', {
     
     
            template:
                '<div>' +
                    '<slot name="demo-title"></slot>' +
                    '<ul>' +
                        '<slot name="demo-item"></slot>' +
                    '</ul>' +
                '</div>'
        })

		// 标题组件
        Vue.component('demo-title', {
     
     
            props: ['title'],
            template: '<p>{
     
     { title }}</p>'
        })

		// 标题下面对应的每一项
        Vue.component('demo-item', {
     
     
            props: ['item', 'index'],
            template: '<li>{
     
     { index }}=========={
     
     { item }} </li>'
        })

		// vue实例 给组件提供数据 
        let vm = new Vue({
     
     
            el: "#app1",
            data: {
     
     
                title: '后端语言',
                items: ['java', 'python', 'go', 'linux']
            }
        })
    </script>
</body>
</html>

3. vue组件通过自定义事件更改vue实例中的数据

this.$emit(‘functionName’, params…)实现自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 插槽复习</title>

    <script src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        <my-component>
            <!-- 给组件插槽 绑定vue实例对象中的title -->
            <!-- v-bind:index="index" ==> :index="index" -->
            <!-- v-on:click="show" @click="show" -->
            <my-title slot="my-title" v-bind:title="title"></my-title>
            <my-content slot="my-content" v-for="(item, index) in items"
                        :content="item" :index="index" :key="index"
                        v-on:remove="removeItems(index)"> <!-- 自定义移除事件remove 并绑定了vue实例中的removeItems -->
            </my-content>
        </my-component>
    </div>

    <script>
        Vue.component('my-component', {
     
     
            /* 使用插槽代替 模板对象 */
            template:
                    '<div>\
                        <slot name="my-title"></slot>\
                            <ul><slot name="my-content"></slot></ul>\
                    </div>'
        })

        Vue.component('my-title', {
     
     
            props: ['title'],
            template: '<p>{
     
     { title }}</p>'
        })

        Vue.component('my-content', {
     
     
            props: ['content', 'index'], // 定义index属性接收页面的绑定值
            template: '<li>{
     
     { index }} ===== {
     
     { content }} <button @click="remove">移除</button> </li>', //绑定了remove
            methods: {
     
     
                remove: function (index) {
     
     
                    // 自定义事件分发 移除vue实例中的数据
                    // alert('remove ..' + index)
                    // 调用自定义函数 并传入参数
                    this.$emit('remove', index)
                }
            }
        })

        let vm = new Vue({
     
     
            el: "#app",
            data: {
     
     
                title: 'a title',
                items: ['java', 'python', 'go']
            },
            methods: {
     
     
                removeItems: function (index) {
     
     
                    // 从index这一位移除
                    this.items.splice(index, 1);
                }
            }
        });
    </script>

</body>
</html>

vue自定义组件，插槽，自定义事件

vue组件套娃

1. vue自定义组件

2. 组件和插槽套娃

3. vue组件通过自定义事件更改vue实例中的数据

猜你喜欢