Question

对VueJS来说很新鲜。感谢您给我的任何帮助！

我想要将我在app.js中放入的一些代码提取到我的组件中。看来vuejs语法会根据您所包含的内容而改变？有时模板属于属性，有时它有自己的标记。不太清楚该怎么做。

VueJS + Laravel 5.5

app.js：

require('./bootstrap');
require('sweetalert');

window.Vue = require('vue');

import Modal from './components/Modal';

Vue.component('Modal', require('./components/Modal.vue'));


const app = new Vue({
    el: '#app',
    data: {
        showModal: false
    },
    methods: {
        openModal() {
            this.showModal = true;
        },
        closeModal() {
            this.showModal = false;
        },
        submitAndClose() {
            //
        }
    }
});

组件/ Modal.vue

<template> 
<transition name="modal">
 <div class="modal modal-mask" style="display: block">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header"></slot>
      </div>

      <div class="modal-body">
        <slot name="body"></slot>
      </div>

      <div class="modal-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</div>
</transition> 
</template>

<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}
</style>

有没有办法从app.js中提取方法和数据，并将其全部包含在Modal.vue中。我确定这是一个基本问题，但Vue似乎对其语法非常困惑。

谢谢！

Answer 1

您可以使用//example here i guess **SESSIONTYPE COLUMN IS INTEGER** $sth->bindParam(':SESSIONTYPE', $source['SESSIONTYPE'], PDO::PARAM_INT);注册组件。第二个参数Vue.component(tagName, options)是一个具有不同属性的对象，如名称，模板等

您还可以将扩展名为options的单文件组件与Webpack等构建工具结合使用。该模板将放置.vue标记，<template>标记内的样式和<style>标记内的选项对象。您可以阅读有关单文件组件here的更多信息。

将方法和数据提取到组件

1 个答案: