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作为组件名称 - 如果您习惯了它，那么您将获得更少的“为什么它不起作用？！”注意拼写错误：看起来不好 - 或者只是会更好（好吧，它看起来不那么好 - 也许你应该选择一个完全不同的名称）createmailcreateEmailcreateemailVue.component('InputAddress', {&nbsp; props: ["addresses"],&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; displayAddressBook: false,&nbsp; &nbsp; &nbsp; address: null&nbsp; &nbsp; }&nbsp; },&nbsp; template: `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label><b>To: </b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="address"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="displayAddressBook = !displayAddressBook"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Address Book&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul v-if="displayAddressBook">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="(address, i) in addresses"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="i"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="clickAddressHandler(address)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{address}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; `,&nbsp; watch: {&nbsp; &nbsp; address(newVal) {&nbsp; &nbsp; &nbsp; // emitting value to parent on change of the address&nbsp; &nbsp; &nbsp; // data attribute&nbsp; &nbsp; &nbsp; this.$emit('address-change', newVal)&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; clickAddressHandler(address) {&nbsp; &nbsp; &nbsp; // handling click on an address in the address book&nbsp; &nbsp; &nbsp; this.address = address&nbsp; &nbsp; &nbsp; this.displayAddressBook = false&nbsp; &nbsp; }&nbsp; }})Vue.component('MailComposer', {&nbsp; props: ['addressesbook'],&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; createmail: {&nbsp; &nbsp; &nbsp; &nbsp; to: '',&nbsp; &nbsp; &nbsp; &nbsp; subject: '',&nbsp; &nbsp; &nbsp; &nbsp; body: ''&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; send: function(createmail) {&nbsp; &nbsp; &nbsp; this.$emit('send', createmail);&nbsp; &nbsp; },&nbsp; &nbsp; addressChangeHandler(value) {&nbsp; &nbsp; &nbsp; this.createmail.to = value&nbsp; &nbsp; }&nbsp; },&nbsp; template: `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input-address&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :addresses="addressesbook"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="createmail.to"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @address-change="addressChangeHandler"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>Subject: </b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="createmail.subject"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>Body: </b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea v-model="createmail.body"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="send(createmail)">Send</button><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createmail.to: {{ createmail.to }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `});new Vue({&nbsp; el: "#app",&nbsp; data: {&nbsp; &nbsp; addressesbook: [&nbsp; &nbsp; &nbsp; '[e-mail]',&nbsp; &nbsp; &nbsp; '[e-mail]'&nbsp; &nbsp; ]&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <mail-composer :addressesbook="addressesbook" /></div>