VueJS 组件显示其他组件内容

Question

目标：Vue 组件输入地址必须位于 Vue 组件邮件编辑器中，并且仅当有人单击“地址簿”按钮时才显示地址列表。当有人单击其中一个显示的邮件或手动填写“收件人”字段时，createdmail.to 必须获取该值，并且必须隐藏地址列表。Vue 组件邮件编辑器。此组件接收地址列表。（一切都在这里工作，我认为唯一不能正常工作的部分是输入地址标签内的v模型）Vue.component('mail-composer', {    props: ['addressesbook'],    methods: {      send: function(createmail) {        this.$emit('send', createmail);      }    },            template:            `            <div>              <input-address :addresses="addressesbook" v-model="createmail.to"></input-address>              <p><b>Subject: </b><input type="text" v-model="createmail.subject"></input></p>              <p><b>Body: </b><textarea v-model="createmail.body"></textarea></p>              <button @click="send(createmail)">Send</button>            </div>            `,            data(){              return{                createmail:{                  to: '',                  subject: '',                  body: ''                }              }            }      });另一个 Vue 组件是这个组件，它位于同一个文件中。（我认为所有问题都在这里）。只有当有人单击“地址簿”按钮时，我才需要显示地址列表，并且当有人再次单击按钮或列表中的其中一封电子邮件时，我必须将其隐藏。当有人从列表中单击邮件时，邮件编辑器中的 createmail.to 属性必须获取邮件的值，如果我决定手动放置邮件，则必须发生相同的情况。Vue.component('input-address',{        props:["addresses"],        template:        `          <div>          <label><b>To: </b><input type="text"></input><button @click="!(displayAddressBook)">Address Book</button></label>          <ul v-if="displayAddressBook">            <li  v-for="address in addresses">            {{address}}            </li>          </ul>          </div>        `,        data(){          return{            displayAddressBook: false          }        }      })

Answer 1

代码中存在一些错误：

• @click="!(displayAddressBook)"应该是 - 第一个真的什么都不做（有趣），第二个（建议）将的值设置为当前具有的相反值。@click="displayAddressBook = !displayAddressBook"displayAddressBook

• 输入地址组件实际上不会对输入字段执行任何操作（缺少v-model)

• 子组件 （） 中的更改不会发送回父组件（在子组件中添加了一个 er 来执行此操作）input-addresswatch

• 父组件 （） 必须处理从子组件发出的值（添加了操作处理程序）mail-composer@address-change

• 组件中没有集。通过使用索引来添加（不是最佳解决方案，但很容易做到）。v-forinput-addresskeykey

• 只是放在的末尾，所以你可以看到它是如何变化的createmail.to: {{ createmail.to }}MailComposer

建议

• 始终使用CamelCase作为组件名称 - 如果您习惯了它，那么您将获得更少的“为什么它不起作用？！”

• 注意拼写错误：看起来不好 - 或者只是会更好（好吧，它看起来不那么好 - 也许你应该选择一个完全不同的名称）createmailcreateEmailcreateemail

Vue.component('InputAddress', {

  props: ["addresses"],

  data() {

    return {

      displayAddressBook: false,

      address: null

    }

  },

  template: `

          <div>

          <label><b>To: </b>

            <input

              type="text"

              v-model="address"

            />

            <button

              @click="displayAddressBook = !displayAddressBook"

            >

              Address Book

            </button>

          </label>

          <ul v-if="displayAddressBook">

            <li

              v-for="(address, i) in addresses"

              :key="i"

              @click="clickAddressHandler(address)"

             >

              {{address}}

            </li>

          </ul>

          </div>

        `,

  watch: {

    address(newVal) {

      // emitting value to parent on change of the address

      // data attribute

      this.$emit('address-change', newVal)

    }

  },

  methods: {

    clickAddressHandler(address) {

      // handling click on an address in the address book

      this.address = address

      this.displayAddressBook = false

    }

  }

})

Vue.component('MailComposer', {

  props: ['addressesbook'],

  data() {

    return {

      createmail: {

        to: '',

        subject: '',

        body: ''

      }

    }

  },

  methods: {

    send: function(createmail) {

      this.$emit('send', createmail);

    },

    addressChangeHandler(value) {

      this.createmail.to = value

    }

  },

  template: `

            <div>

              <input-address

                :addresses="addressesbook"

                v-model="createmail.to"

                @address-change="addressChangeHandler"

              />

              <p>

                <b>Subject: </b>

                <input

                  type="text"

                  v-model="createmail.subject"

                />

              </p>

              <p>

                <b>Body: </b>

                <textarea v-model="createmail.body"></textarea>

              </p>

              <button @click="send(createmail)">Send</button><br />

              createmail.to: {{ createmail.to }}

            </div>

            `

});

new Vue({

  el: "#app",

  data: {

    addressesbook: [

      '[e-mail]',

      '[e-mail]'

    ]

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <mail-composer :addressesbook="addressesbook" />

</div>