学习Vue子组件操作父组件（emit）

最新推荐文章于 2024-06-18 09:00:43 发布

majinbo111

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量300

点赞数

分类专栏： WEB前端文章标签： vue emit 父子组件数据操作

本文链接：https://blog.csdn.net/u011944141/article/details/106790576

版权

WEB前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

本文介绍了一个使用Vue.js实现的动态组件案例，通过v-for指令遍历显示列表项，并为每个组件传递动态数据和唯一key。组件内部实现了数据的复制、增减操作，并将这些操作作为事件向上抛出，由父组件处理。这展示了Vue.js中组件间的数据流和事件传递机制。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue learning</title>
</head>
<body>
    <div id="app">
        <input v-model="count"/>
        <ol>
            <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，稍后再
              作详细解释。
            -->
            <todo-item
              v-for="item in groceryList"
              v-bind:todo="item"
              v-bind:key="item.id"
              @do-copy="doCopy"
              @do-add="doAdd"
              @do-sub="doSub"
              ></todo-item>
          </ol>
    </div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script>
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }} <button @click="copy(todo.text)">复制</button><button @click="add()">+</button><button @click="sub()">-</button></li>',
        methods:{
            copy: function(text){
                console.log('do-copy',text);
                this.$emit('do-copy', text)
            },
            add: function() {
                console.log('do-add');
                this.$emit('do-add');
            },
            sub: function() {
                console.log('do-sub');
                this.$emit('do-sub');
            },
        },
    })

    var app = new Vue({
        el: '#app',
        data: {
            count: 0,
            groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
            ]
        },
        methods:{
            doCopy(text) {
                console.log('groceryList', text)
                this.groceryList.push({
                    id: this.groceryList.length,
                    text: text,
                })
            },
            doAdd() {
                console.log('doAdd', this.count);
                this.count++;
            },
            doSub() {
                console.log('doSub', this.count);
                if (this.count > 0) {
                    this.count--;
                }
            },
        }
    })
</script>
</body>
</html>