Question

Vue的基本实现在这里作为测试运行，我有一些问题将数据分解为组件。这是HTML：

page = requests.get('https://registrar.fas.harvard.edu/calendar').content
soup = bs4.BeautifulSoup(page, 'lxml')

links = soup.find_all('a')
#print links    
for link in links:
    print link    

    if link.get('href') != None and '.ics' in link.get('href'):
        endout = link.get('href')

        if endout[:6] == 'webcal':
            endout ='https' + endout[6:]
        print
        print 'URL: ' + endout
        print
        return endout
    break

我正在实例化一个Vue实例并将其绑定到＃main-header：

<body>
    <header id="main-header">
       <custom-header></custom-header>
    </header>
</body>

导入的模板：

import CustomHeader from '../header.vue';

chx = {
    dates: { dateFormatted:"2016-01-01"},
    title: "Hello World",
    settingsVisible: false
} 

const header = new Vue({
    el: '#main-header',
    data: chx,
    components: {
        'custom-header': CustomHeader
    },
    methods: {
        run: function() {
            console.log('run');
        },
        print: function() {
            window.print()
        },
        save: function() {
            console.log('save');
        }
    }
});

我最大的问题是我的模板无法找到我创建的<template> <div> <div class="header-menu"> <img class="logo" src="images/logo.png"> </div> <i v-on:click="run" id="run" class="fa fa-3x fa-play-circle run-icon no-print" aria-hidden="true"></i> <div class="header-menu"> <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1> <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i> </div> </div> </template> <script> export default { props: ['title', 'dates'] } </script>对象中的任何数据。我收到错误chx。我假设我可能必须使用"TypeError: Cannot read property 'startFormatted' of undefined"，但我不确定这些内容与bind和v-show一起使用。

Answer 1

对于第一部分，您需要在header.vue组件中定义道具，如下所示：

props: {
    'propname': { type: Object }
}

然后传递您在父组件中创建的chx对象：

<custom-header :propname="chx"></custom-header>

现在您可以访问子组件中的父数据，如下所示：

{{ propname.dates.startFormatted }}

对于问题的第二部分，您需要触发事件以通知父组件更新settingsVisible。你可以这样解决：

<i v-on:click="toggleSettings()" id="settings" class="..."></i>
//
//
methods: {
    toggleSettings() { this.$emit('toggle'); }
}

并在父组件中侦听toggle事件：

<custom-header :propname="chx" v-on:toggle="chx.settingsVisible = !chxsettingsVisible"></custom-header>

您可以通过阅读this document页面获取更多信息。

快乐的编码！

Vue组件无法找到支柱

1 个答案: