欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 组件间传值

程序员文章站 2022-07-03 16:33:22
...

vue 组件间传值

父子组件间的通信

// 
<body>
  <div id="app">
    <todo></todo>
  </div>
  <template id="tplTodoAdd">
    <div><input type="text" v-model="input"><button @click="btn_click">添加</button></div>
  </template>
  <template id="tplTodoItem">
    <div><!--props[ item , i ]-->
      <span>{{item}}</span>
      <button @click="btn_click">x</button>
    </div>
  </template>
  <template id="tplTodoList">
    <div><ul>
      <li v-for="(item,i) in todos">
        <todo-item :item="item" :i="i" @del="delHandler"></todo-item>
      </li>
    </ul></div>
  </template>
  <template id="tplTodo">
    <div>
      <h3>待办事项列表</h3>
      <todo-add @add="add"></todo-add>
      <todo-list :todos="todos"></todo-list>
    </div>
  </template>
  <script>
var todoAdd={//<todo-add></todo-add>
  template:"#tplTodoAdd",
  data(){  return { input:"" }  },
  methods:{
    btn_click(){
      this.$emit("add",this.input)
      this.input="";
    }
  }
};
var todoItem={//<todo-item></todo-item>
  template:"#tplTodoItem",
  data(){ return {} },
  props:["item","i"],
  methods:{
    btn_click(){ this.$emit("del",this.i) }
  },
  mounted(){
    console.log("todoItem中:"+this.item+","+this.i);
  }
};
var todoList={//<todo-list></todo-list>
  template:"#tplTodoList",
  data(){ return { /*todos*/ } },
  props:["todos"],
  methods:{
    delHandler(i){ this.todos.splice(i,1) }
  },
  mounted(){
    console.log("子组件中的todos: "+this.todos);
  },
  components:{
    todoItem//todoItem:todoItem => "todo-item":todoItem
  }
};
Vue.component("todo",{//<todo></todo>
  template:"#tplTodo",
  data(){ 
    return { 
      todos:[]/*todos:[ ... ]*/ 
    }
  },
  methods:{
    add(input){
      this.todos.push(input);
    }
  },
  created(){//mounted(){
    //axios.get()
    this.todos=["吃饭","睡觉","打亮亮"];
  },
  components:{
    //组件名    组件对象
    //"todo-add":todoAdd
    //todoAdd:todoAdd
    todoAdd,
    todoList,
  }
})
  new Vue({ el:"#app" })
  </script>
</body>

vue 组件间传值