nuxt.js 将 prop 传递给组件的内部元素

Question

我有一个简单的组件：

<template>
    <div id="search__index_search-form">
        <input :foo-id="fooId" @keyup.enter="findFoos()" type="text" :value="keyword" @input="updateKeyword"
               placeholder="Search for a foo">
        <button @click="findFoos()">Search!</button>
        {{fooId}}
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        computed: mapState({
            keyword: state => state.search.keyword
        }),
        data: function () {
            return {fooId: "all"};
        },
        methods: {
            updateKeyword(e) {
                this.$store.commit("setSearchKeyword", e.target.value);
            },
            findFoos() {
                this.$store.dispatch("findFoos");
            }
        }
    };
</script>

我从 nuxt 页面调用它：

<template>
    <searchbar v-bind:fooId="500"/>
</template>
<script>
    import searchBar from "~/components/search-bar.vue";

    export default {
        components: {
            'searchbar': searchBar
        }
    };
</script>

这会导致：

<div id="search__index_search-form" fooid="500"><input shop-id="all" type="text" placeholder="Search for a foo"><button>Search!</button>
      all
</div>

问题是，为什么 fooId 绑定到“div.search__index_search-form”而不是输入？为什么 {{fooId}} 的结果是“all”（默认状态），而不是“500”？

Answer 1

fooId 在div#search__index_search-form 上呈现，因为您没有将fooId 声明为组件的属性。 Vue 的默认行为是在组件的根元素上渲染未声明的属性。

您需要将fooId 声明为属性。

 export default {
    props: {
      fooId: {type: String, default: "all"}
    },
    computed: mapState({
        keyword: state => state.search.keyword
    }),
    methods: {
        updateKeyword(e) {
            this.$store.commit("setSearchKeyword", e.target.value);
        },
        findProducts() {
            this.$store.dispatch("findFoos");
        }
    }
};

我不确定你真正想要完成什么。

<input :foo-id="fooId" ... >

那段代码似乎没有任何意义。