blade 中操作 vue 组件

blade 中使用 vue 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
window.Vue = require("vue");
import promise from "es6-promise";
promise.polyfill();

// import Axios from '@/utils/request.js'
// Vue.prototype.$ajax = Axios;
// 注册全局组件
Vue.component("dialog", require("./dialog.vue").default);

const dialog = new Vue({
  el: "#dialog",
});
// 实例化vue

在 blade 中

1
2
3
4
5
6
7
8
9
10
<section class="dialog-test">
  <div id="dialog">
    <!-- vue组件 -->
    <dialog>测试弹窗内容</dialog>
  </div>
  <!-- 触发弹窗的按钮 -->
  <button class="show-dialog">open dialog</button>
  <!-- 打包并引入v组件的入口文件 -->
  <script src="{{ mix('js/views/library/component-vue/dialog.bundle.js') }}"></script>
</section>

将 vue 组件挂在 window 上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
  // 使用element组件
  import { Dialog, Button } from "element-ui";
  Vue.use(Dialog);
  Vue.use(Button);
  export default {
    name: "dialog",
    data() {
      return {
        dialogVisible: false,
      };
    },
    mounted() {
      // this是组件实例
      // 在window上定义一个属性，指向组件实例
      window.VDialog = this;
    },
    methods: {
      controlDialog() {
        this.dialogVisible = !this.dialogVisible;
      },
    },
  };
</script>

通过 window 上的全局变量操作组件

1
2
3
4
5
6
7
8
9
console.log(VDialog);
//  VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

$(function () {
  $(".show-dialog").on("click", function () {
    // controlDialog是methods里定义的方法
    VDialog.controlDialog();
  });
});