vue_父子组件互相传值

Posted 2020-11-27 junlan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_父子组件互相传值相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--
      v-model input输入双向绑定数据
      当用户输入数据，input发生改变时，输入的内容会自动保存到inputValue中
    -->
    <input type="text" v-model="inputValue">
    <button @click="handleClick">提交</button>
    <ul>
      <!-- 
        父向子组键传值 v-bind: 指令
        子组件使用props接收
        父组件通过监听子组件自定义事件(delete)，调用绑定函数
      -->
      <todo-item 
        v-for="(item, index) in list"
        :content="item"
        :index="index"
        @delete="handleItemDelete"
      ></todo-item>
    </ul>
  </div>
</body>
<script type="text/javascript">
  //局部组件/子组件
  let TodoItem = {
    // props可以接收父组件传递过来的值
    props: [‘content‘, ‘index‘],
    template: `<li @click=‘handleItemClick‘>{{this.content}}</li>`,
    methods: {
      handleItemClick () {
        //子组件使用$emit(constomEvent[,data])向父组件传值，data表示传送的数据
        this.$emit(‘delete‘, this.index)
      }
    }
  }
  let app = new Vue({
    el: ‘#app‘,
    data: {
      list: [],
      inputValue: ‘‘
    },
    //局部组件注册
    components: {
      TodoItem
    },
    methods: {
      handleClick () {
        this.list.push(this.inputValue)
        this.inputValue = ‘‘
      },
      // 子组件向父组件传值进行操作
      handleItemDelete (index) {
        this.list.splice(index, 1)
      }
    }
  })
</script>
</html>

以上是关于vue_父子组件互相传值的主要内容，如果未能解决你的问题，请参考以下文章