Vue组件基础

最新推荐文章于 2024-08-29 15:10:00 发布

MikazukiMo

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量204

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/MikazukiMo/article/details/105817408

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Vue.component
基本语法

<body>
    <div>
        <组件名称>中间会显示模板的内容</组件名称>
    </div>
</body>

<script>
    Vue.component("组件名称", {
        data: 组件数据(必须是函数),
        template: 组件模板内容,
        [methods]
    });
    var vm = new Vue({
        data: {

        },
        components: {
            "组件名称": {
     		   data: 组件数据(必须是函数),
     		   template: 组件模板内容,
     		   [methods]
            }
        }
    })
</script>

例子

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

prop

1.父子间组件数据的传递
1.1组件内部通过prop接收传递的值
1.2父组件通过属性传递值给子组件

    Vue.component("组件名称", {
        props:["title"],
        template: "<div>{{title}}</div>"
    });

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item title="pmsg"></menu-item>
        <menu-item :title="pmsg"></menu-item>
    </div>
</body>
//在props中使用驼峰命名,模板中则需要改成短横线形式
//字符串形式模板则没有以上的限制
<script>
    Vue.component("menu-item", {
        data: function () {
            return {
                msg: "子组件自身数据"
            }
        },
        props: ["title"],
        template: "<div>{{msg + '------- '+title}}</div>"
    });
    var vm = new Vue({
        el: "#app",
        data: {
            pmsg: "父组件的数据"
        }
    })
</script>

输出结果
在这里插入图片描述
3.子组件通过$emit()自定义事件来反馈

<body>
    <div id="app">
    	<!--设定样式-->
        <div :style="{fontSize:fontSize + 'px'}">{{pmsg}}</div>
        					<!--通过$event接收$emit中的"5"-->
        <menu-item @size="handle($event)" :style="{fontSize:fontSize + 'px'}"></menu-item>
    </div>
</body>
<script>
    Vue.component("menu-item", {
        data: function () {
            return {
                msg: "子组件自身数据"
            }
        },
        props: ["title"],
        template: `
        <div>
            {{msg + '------- '+title}}
            					<!--$emit触发的第二个参数可以设定传输的数据,需要使用$event传递-->
            <button @click='$emit("size",5)'>变大</button>
        </div>
        `
    });
    var vm = new Vue({
        el: "#app",
        data: {
            pmsg: "父组件的数据",
            fontSize:10
        },
        methods:{
        			//通过设定形参来使用$event的数据
            handle:function(val){
                this.fontSize += val
            }
        }
    })
</script>

4.非父子组件间的数据传递

<body>
    <div id="app">
        <tom></tom>
        <jerry></jerry>
    </div>
</body>
<script>
    var middle = new Vue();
    Vue.component("tom", {
        data: function () {
            return {
                num: 0
            }
        },
        template: `
            <div>
                <div>Tom:{{num}}</div>
                <!--绑定事件-->
                <button @click="handle">Up</button>
            </div>
        `,
        methods: {
            handle: function () {
            	//触发事件
                middle.$emit("jerry-event", 1)
            }
        },
        mounted: function () {
        	//监听事件
            middle.$on("tom-event", (val) => {
                this.num += val;
            })
        }
    });
    Vue.component("jerry", {
        data: function () {
            return {
                num: 0
            }
        },
        template: `
            <div>
                <div>Jerry:{{num}}</div>
                <!--绑定事件-->
                <button @click="handle">Up</button>
            </div>
        `,
        methods: {
            handle: function () {
            	//触发事件
                middle.$emit("tom-event", 2)
            }
        },
        mounted: function () {
        	//监听事件
            middle.$on("jerry-event", (val) => {
                this.num += val;
            })
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            pmsg: "父组件的数据",
            fontSize: 10
        },
        methods: {
            }
        }
    })
</script>

组件插槽

1.基本

<body>
    <div id="app">
        <test>
        <!--替换的是slot内部的内容,如果不填写,则显示slot中设定好的默认内容-->
            插入的内容
        </test>
    </div>
</body>
<script>
    Vue.component("test", {
        template: `
            <div>
                <slot>默认内容</slot>
                <strong>Error</strong>
                
            </div>
        `
    })
    var vm = new Vue({
        el: "#app"
    })
</script>

结果:
在这里插入图片描述
2.具名插槽
使用v-slot:名称
注意 v-slot 只能添加在 <template> 上

<body>
    <div id="app">
        <test>
       		<!--头部的内容-->
            <template v-slot:header>
                <h1>Hello World!</h1>
            </template>
            <!--底部的内容-->
            <template v-slot:footer>
                <h1>Bye!</h1>
            </template>
        </test>
    </div>
</body>
<script>
    Vue.component("test", {
        template: `
            <div>
            	<!--头部的内容-->
                <slot name="header"></slot>
                <strong>------------</strong>
                <!--底部的内容-->
                <slot name="footer"></slot>
            </div>
        `
    })
    var vm = new Vue({
        el: "#app"
    })
</script>

3.作用域插槽
使用v-lost=“名称”
父组件对子组件的内容进行加工处理

<body>
    <div id="app">
        <test :list="list">
            <template v-slot="strong">
                <strong v-if="strong.heighLight.id == 2">
                    {{strong.heighLight.name}}
                </strong>
            </template>
        </test>
    </div>
</body>
<script>
    Vue.component("test", {
        props: ["list"],
        template: `
            <div>
                <li :key = "item.id" v-for = "item in list">
                    <slot :heighLight="item">{{item.name}}</slot>
                </li>
            </div>
        `
    })
    var vm = new Vue({
        el: "#app",
        data: {
            list: [{
                id: 1,
                name: "apple"
            },
            {
                id: 2,
                name: "orange"
            },
            {
                id: 3,
                name: "banana"
            }]
        }
    })
</script>