Question

我有一个简单的问题，但找不到解决方法。

有 2 个 Vue 2 组件。在组件 1 中，传递了两个 props，因此在组件 2 中使用。

// Component 1
Vue.component('component1', {
    props: {
        titleTest: {
            type: String,
            required: true
        },
        textTest: {
            type: String,
            required: true
        }
    },
    template: `
    <div>
        <div :title="titleTest">{{ titleTest }}</div>
        <div :data-test="textTest">{{ textTest }}</div>
    </div>
    `,
    created() {
        console.log('Created1');
        this.$root.$refs.component1 = this;
    },
    methods: {
        foo: function() {
            alert('this is component1.foo');
        }
    }
});

// Component 2
Vue.component('component2', {
    template: `
    <div>
        <div>Some text</div>
        <ul>
            <li>List Item1</li>
            <li>List Item2</li>
        </ul>
        <div>
            <button id='test' type="submit" @click="bar">Text</button>
            <component1 ref="component1" :title="test1" :data-test="test2"></component1>
        </div>
    </div>
    `,
    data: function() {
        return {
            test1: 'testText1',
            test2: 'testText2'
        };
    },
    methods: {
        bar: function() {
            this.$root.$refs.component1.foo();
        }
    },
    created: function() {
        console.log('Created2');
    }
});

new Vue({
    el: '#plotlyExample',
});

我的想法是，当我在组件 2 HTML 模板中使用组件 1 并绑定数据变量时，它们应该被显示出来。但是，Vue 只设置了“title”和“data-test”，但不显示{{ titleTest }}, {{ textTest }}。此外，Vue 将 props 设置在一个 div 中，而不是两个单独的。

我的理想结果是：

Answer 1

您将道具命名为 titleTest 和 textTest，这意味着您需要传递 title-test 和 text-test，NOT title和data-test。

它们最终出现在您的主 <div> 中的原因是因为当 Vue 无法将它们识别为 props（因为您使用了不同的名称）时，它会假设它们是常规的 HTML 属性（例如 {{ 1}}、class 和 id)

为了让它工作，你要么需要在 Component1 中将你的 props 重命名为 style 和 title，或者你应该在 Component1 中使用 dataTest 和 title-test 名称组件 2.

Answer 2

您只需要将道具传递给 symbol = ["IBM", "MSFT", "AAPL"]; function getting_data(){ // if(company !== null){ for (i = 0; i < symbol.length; i++) { $.getJSON("https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol="+symbol[i]+"&outputsize=compact&interval=60min&apikey="+api) .done(async function(data){ console.log(data) if (data.Note) { alert(data.Note); return } const responceData = []; var date = data["Time Series (60min)"] console.log(date) let a = 1; // let b = 7; for(var d in date){ // var r = d.split("-"); if(a-- > 0){ var value = date[d]; // dps.unshift({x: new Date(parseInt(r[0]), parseInt(r[1])-1, parseInt(r[2])), y: parseFloat(value["1. open"])}); // if(b-- > 0){ let c = [d, value["1. open"], value["2. high"], value["3. low"], value["4. close"], value["5. volume"]]; responceData.push({ date: d, open: value["1. open"], high: value["2. high"], low: value["3. low"], close: value["4. close"], volume: value["5. volume"], }); // } }else{ break; } }

component1

Answer 3

您在 component1（子组件）中的 props 命名错误，您使用了 title 和 data-test 但您的 props 名称是 titleTest 和 textTest ！所以你应该使用 title-test 和 text-test 代替。

:prop-name="propValue"

VueJs 2：如何在另一个组件中显示 prop？

3 个答案: