vue组件之间的通信

来源：互联网发布：百度首页源码编辑：程序博客网时间：2024/06/05 12:48

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("事件"，“参数”)；

0 0