Vue中组件间的传值(子传父,父传子)

  • A+
所属分类:vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
   <!-- 组件化改造内容:list标签组件化 -->
   <div id="app">
       <input type="text" v-model="inputValue">
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <!-- todo-item就是组件名TodoItem,这里不区分大小写 -->
           <!-- v-bind绑定值 3@delete事件绑定,item是数组的内容,index是数组的下标-->
           <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete">
            </todo-item>
       </ul>
   </div>
    
   <script> // 父传子-在父组件使用子组件的地方通过v-bind进行传值,在子组件中通过props进行接受传过来的值。 // 子传父-在子组件中通过$emit向外抛出一个事件,通过在父组件使用子组件的地方监听该事件,就要拿到子组件传过来的值。 // 在写Vue代码的时候不要直接操作DOM,而是要通过数据的改变,让页面去自动更正变化。 // 创建全局组件的一个方法Vue.component Vue.component('TodoItem',{
      props: ['content','index'], // 接收外部传入的v-bind:content的值,父组件todo-item向子组件TodoItem传值 template:"<li @click='handleItemClick'>{
     {content}}</li>", // 1创建一个模板。v-on:click简写@click,v-bind:可以简写为: methods:{
      handleItemClick:function(){
      this.$emit('delete',this.index) // 2当点击子组件的时候,子组件会向外出发一个delete事件,在父组件中创建子组件的同时,可以去监听delete事件 } } }); var app = new Vue({
      el:'#app', data:{
      list:[], inputValue:'' }, methods:{
      handleBtnClick:function(){
      this.list.push(this.inputValue); this.inputValue = ''; }, handleItemDelete:function(index){
      // 4定义删除方法,使用index作为参数 // this.list = [] // 清空所有数据 this.list.splice(index,1) // 传入的数据下标减一 } } }) </script>
</body>
</html>
w3cjava

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: