Question

尝试使用Vue.js 2我做了一个小项目并试图导入一个组件，但浏览器中有一个空页面。我想使用“extend”来尝试这个例子：https://jsfiddle.net/xmqgnbu3/1/

所以我的main.js看起来像这样：

'''Image Upload'''

upload_photo_element = driver.find_element_by_xpath(upload_photo_field_ID)
image = os.path.join(os.getcwd(), 'images/' + 'img.png')
upload_photo_element.send_keys(image)

# Depending on how long the image takes to load
time.sleep(5)

upload_photo_reject_button_element = WebDriverWait(driver, 10).until(
lambda driver: driver.find_element_by_id(upload_photo_reject_button_ID))

upload_photo_reject_button_element.click()

'''End image upload'''

我的App.vue文件：


request = service.instances().import(project=project, instance=instance, body=instances_import_request_body)

我的WorkZone.vue文件：

import Vue from 'vue'
import WorkZone from './components/WorkZone.vue'
import App from './App.vue'

var vm = new Vue({
    el: '#app',
    components: {
      'work-zone': WorkZone,
      'app': App
    }
});

这个想法是后来会有一个带按钮的侧边栏。每个按钮都会在工作区或页面上的任何其他组件中添加元素。我希望这个函数（例如“函数addElem（）”）可以在任何组件中访问。

Answer 1

main.js

 var WorkZone = Vue.extend({
        template: `
        <div id="work-zone">
            <div id="wrapper">
            <ul v-for="item in tabItems">
            <li>{{ item.title }}</li>
            </ul>
            <button @click="createTab({title: 'Hello', project: 'World', done: false})">Create Tab</button>
            </div>
        </div>`,
        data() {
            return {
                tabItems: [{
                    title: 'Главная страница',
                    project: 'Текст главная страница',
                    done: false,
                }],
            };
        },
        methods: {
            createTab: function(newTab) {
                this.tabItems.push(newTab);
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        components: {
          'work-zone': WorkZone
        }
    });

你的html文件：

<div id="app">
   <work-zone></work-zone>
</div>

Vue.js“扩展”使用的正确方法是什么？

1 个答案: