vue父子组件之间通信实例

待我称王封你为后i 2022-04-21 21:06 265阅读 0赞

**一、父组件向子组件传递数据**

①获取数据并在父组件上绑定数据

②在子组件使用props接收父组件传递过来数据

③将接收的数据绑定到子组件模板

**二、子组件向父组件传递数据**

①在子组件上定义一个事件 如 @click='handleItemClick'

②在这个方法里面使用this.$emit方法提交一个自定义事件，如 this.$emit("delete",this.index);

③在父组件监听这个自定义事件 如： @delete="handleItemDelete"

④在这个事件的方法里面操作父组件的数据 ：如

handleItemDelete: function() \{  
        this.list.splice(index,1)  
\}

<body>
      <div id="app">
        <input type="text" v-model="inputValue" />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
          <todo-item :content="item" 
                     :index="index" 
                     v-for="(item, index) in list"
                     @delete="handleItemDelete">
          </todo-item>
        </ul>
      </div>
    
      <script>
        var TodoItem = {
          props: ['content', 'index'],
          template: "<li @click='handleItemClick'>{
       {content}}</li>",
          methods: {
            handleItemClick: function() {
              this.$emit("delete",this.index);
            }
          }
        }
    
        var app = new Vue({
          el: '#app',
          components: {
            TodoItem: TodoItem
          },
          data: {
            list: [],
            inputValue: ''
          }
        })
        methods: {
          handleBtnClick: function() {
            this.list.push(this.inputValue)
            this.inputValue = ''
          },
          handleItemDelete: function() {
            this.list.splice(index,1)
          }
        }
      </script>
    <body>