vue03-全局组件

最新推荐文章于 2024-07-15 16:14:03 发布

一笑而过者也

最新推荐文章于 2024-07-15 16:14:03 发布

阅读量197

点赞数

分类专栏： Vue 文章标签： vue vue全局组件 Vue.component

本文链接：https://blog.csdn.net/u012326462/article/details/82820383

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

首先看下面代码

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双向绑定  mvvm-->
        <input type="text" v-model="inputValue" />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <to-do-item 
                v-bind:content="item" 
                v-bind:index=index
                v-for="(item, index) in list"
                @delete="handleItemDelete">
            </to-do-item>
        </ul>
    </div>

    <script>
        //v-bind可以简写成:
        //v-on可以简写成@

        //创建全局组件的一个方法
        Vue.component("ToDoItem",{
            props:['content',"index"],,  //v-bind 绑定循环的item值，把值传进来的一种方式，外面传过来的数据接收
            template:"<li  @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    //this.$emit("delete"); //子组件向父组件传值，触发一个事件  父组件用v-on做监听@，用一个监听方法
                    this.$emit("delete",this.index); //同时带一个参数,传给父组件
                }
            }
        });

       
        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleItemDelete: function(index){
                    this.list.splice(index,1); //删除
                }
            }
        })
    </script>


</body>

</html>

@就是v-on的缩写

: 就是v-bind的缩写

创建全局组件的方法是：


        Vue.component("ToDoItem",{
            props:['content',"index"],
            template:"<li  @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    this.$emit("delete",this.index); 
                }
            }
        });

props: 向组件内部传值时定义的接收变量，例子中是接收item的值。父组件向子组件传值的一种方式

template: 定义的模板的内容，这个模板也会一个vue实例，可以写vue的标签等

$emit: 触发父组件定义的delete方法，第二个参数表示传过去的参数，子组件向父组件传值的一种方式。

在父组件里面定义子组件，把content和index，传入子组件中，@delete监听子组件触发的delete事件，触发handleItemDelete方法。

<to-do-item 
                v-bind:content="item" 
                v-bind:index=index
                v-for="(item, index) in list"
                @delete="handleItemDelete">
            </to-do-item>

效果：点击列表时，就会把当前点击的数据删除。

一笑而过者也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue03-全局组件

首先看下面代码&lt;!DOCTYPE html&gt;&lt;html lang=en&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Hello world&lt;/title&gt; &lt;script src="vue.js"&gt;&amp
复制链接

扫一扫

专栏目录