Vue父组件与子组件之间传值

Vue父组件与子组件之间传值


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoListtitle>
head>
<script src="./vue.js">script>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="submit">提交button>
        div>
        <ul>
            <todo-item v-for="(item, index) of list" :content="item" :key="index" :index="index" @myevent="doDelete">todo-item>
        ul>
    div>
    <script>
        // 全局组件
        Vue.component('todo-item', {
            props: ['content', 'index'], // 接收属性值
            template: '
  • {{content}}
  • '
    , methods: { handleClick: function () { this.$emit('myevent', this.index); } } }) new Vue({ // 创建实例 el: '#root', // 挂载点 data: { inputValue: '', list: [] }, methods: { submit: function () { this.list.push(this.inputValue); this.inputValue = ''; }, doDelete: function (index) { console.log(index); this.list.splice(index, 1); } } })
    script> body> html>

    Vue父组件与子组件之间传值_第1张图片

    你可能感兴趣的:(Vue学习)