Vue.js如何将数据作为道具传递给子组件

Question

I build following component:

var Modal = Vue.component('modal', {

    template: `
        <div id="modal" class="modal">
            <div class="modal-content">
                <p>{{ link }}</p>
            </div>
        </div>
    `,

    props: [
        'link'
    ],

});

And I would like to change the link data dynamically after I sent successfully an axios post.

My vue instance

new Vue({

    el: '#form',

    components: {
        'modal': Modal
    },

    data: {
        userId: '',
        title: '',
        body: '',
        snippetLink: '',
    },

    methods: {

        publish (e) {
            var self = this;
            axios.post('/snippets',  {
                title: this.title,
                body: this.content,
            })
            .then(function (response) {
                console.log("success");
                self.link = response.data.hash; // Here I tried to add the reponse content to the vue component's p
            })
            .catch(function (error) {
              console.log(error);
            })
        },

My Html Markup:

        <modal link=""></modal>
       ...
        <button type="button"                      
                   v-bind:class="{ 'modal-trigger': !isActiveModal }"
                   @click="publish">Publish
                   <i class="material-icons right">send</i>
        </button>

So I am sending an axios post to my server successfully and get the data, I would like to open a modal window and put the data in ap tag, so far the modal pops up after my post but I am not sure my it does not change the content of the p tag.

Answer 1

As per my understanding , Snippetlink property can be used to hold data from server.

self.Snippetlink = response.data.hash;

and Pass Snippetlink to link attribute of the snippet-model

 <snippet-modal :link="Snippetlink"></snippet-modal>

Answer 2

rupesh_padhye's answer is correct. This is just a further explanation.

First of all, to store the response data to a Vue component, you need to define a key in data for that purpose first. So to make this line work: self.link = response.data.hash; , you need to add link as a key for the Vue component's data:

data: {
        userId: '',
        title: '',
        body: '',
        snippetLink: '',
        link: ''
    },

If you mean snippetLink , change the line to self.snippetLink = response.data.hash;

Secondly, to pass the data as a prop to a child component, you have to specify the prop name, as well as the data key being passed. For instance, to pass your component's link as a prop with the same name to the snippet-modal component, you need: <snippet-modal :link="link"></snippet-modal>