如何使用 Vuejs 单击该组件外部的按钮来获取组件的内容？

Question

我有一个模态框，我希望在单击按钮时更新内容。这个按钮不在组件中，我需要它来更新一个 item slug，它将用于从 API 获取内容。

我是 Vuejs 新手。

这是我的 app.js：

Vue.component('pop-modal', require('./components/PopModal.vue'));

const app = new Vue({
    el: '#app',
    data: {
        popSlug: 0
    },
    methods: {
        updatePop: function(popSlug) {
            this.popSlug = popSlug
            console.log(this.popSlug)
        }
    }
});

这是我的组件：

<template>
    <div class="modal fade" id="popModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <h1>{{ pop.name }}</h1>
                <p>test: {{ this.$parent.popSlug }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pop: {},
            }
        },
        watch: {
            popSlug(newPopslug) {
                this.popSlug = newPopslug
                this.fetchData()
                console.log('new popslug value!')
            }
        },
        mounted() {
            console.log('Component pop-modal mounted.')
        },
        methods: {
            fetchData() {
                axios.get(route('api.pops.show'), this.popSlug)
                .then(response => {
                  // JSON responses are automatically parsed.
                  this.pop = response.data
                })
                .catch(e => {
                  this.errors.push(e)
                })
                console.log('fetchData')
            }
        }
    }
</script>

我知道我做错了，但我不知道如何做对。 watch 方法永远不会被触发，因为 popSlug 不是数据属性。 我可以通过以下方式获得 popSlug 值：

{{ this.$parent.popSlug }}

但我认为这样做是错误的。

提前感谢您的帮助。

Answer 1

您可以将popSlug 值作为道具传递给组件，如文档here 中所述。然后在pop-modal 组件中，您可以访问this.popSlug 的值，手表将对更改做出反应。只要确保不要修改组件内部的 prop 值，因为它应该是只读值。

这是一个有效的example。 internalValue 仅用于显示正在调用手表。您可以直接在模板中使用anyname。