vue组件之间的通信

最新推荐文章于 2024-04-17 11:05:14 发布

浪人巷子7

最新推荐文章于 2024-04-17 11:05:14 发布

阅读量532

点赞数

分类专栏： vue 文章标签：通信

本文链接：https://blog.csdn.net/jiangqing993/article/details/64122553

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、父组件数据如何传递给子组件呢？可以通过props属性来实现

<body>
    <div class="app">

        <input type="text" placeholder="Add a todo" v-on:keyup.enter="addNewTodo" v-model="newTodoText">
        <ul>
            <li
                is="todo-item"
                v-for="(todo, index) in todos"
                v-bind:title="todo"
                v-on:remove="change(index)"
            ></li>
        </ul>
    </div>

<script src="https://unpkg.com/vue"></script>
<script>

    Vue.component("todo-item",{
        props:["title"],
        template:`
            <li>
                {{title}}
                <button v-on:click="$emit('remove')">X</button>
            </li>
        `
    });

    var app = new Vue({
        el:".app",
        data:{
            newTodoText:'',
            todos:[
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods:{
            addNewTodo:function(){
                this.todos.push(this.newTodoText);
                this.newTodoText = '';
            },
            change: function(index){
            	this.todos.splice(index, 1);
            }
        }
    })


</script>
</body>

2、子组件和父组件之间的通信

这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据。

$emit("事件"，“参数”)；