v-for与组件的结合使用

最新推荐文章于 2025-04-12 19:31:36 发布

请不要让我脱发

最新推荐文章于 2025-04-12 19:31:36 发布

阅读量7.2k

点赞数 1

分类专栏： vue学习笔记

本文链接：https://blog.youkuaiyun.com/yangyiboshigou/article/details/72239844

版权

vue学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中基础的组件定义与使用方法，包括如何利用is属性将自定义标签作为组件使用，以及如何通过props传递数据和使用$emit触发自定义事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个例子是vue官网上面一个较为基础的例子，由于刚刚接触vue。所以将例子中一些不懂的语法记录下来。

这里写图片描述

1. 在vue组件开发过程中is的用法：

一般在vue定义组件时，都会使用一些自定义的标签。is的含义就是将原生的html标签当做定义的组件使用。

2. props的用法：
组件实例的作用域是独立的。这意味子组件的模板内不能直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项声明

2.$emit的用法：
v-on:click定义的事件使用$emit触发

这个实例的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model="texts"@keyup.enter="add"/>
   <ul>
       <li v-for="(data,index) in message" style="list-style: none" is="my-component" v-bind:title="data" @remove=remove(index)>
 //v-bind:title="data"  在组件注册时通过  props:['title']可以出去title的值    
//@remove=remove(index) 父组件自定义事件，在子组件中通过$emit进行触发
       </li>
   </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.component('my-component',{  //组件定义的标签名在上面 is中使用该组件
        template:'<li>{{title}}<button v-on:click="$emit(\'remove\')">点击删除</button></li>',
        props:['title']
    });

    var app=new Vue({
        el:'#app',
        data:{
            texts:'',
            message:['foo','bar','aaa']
        },
        methods:{
            add:function(){
                    this.message.push(this.texts);
            },
            remove:function(idx){
                    this.message.splice(idx,1);
            }
        }
    })

</script>
</body>
</html>