Javascript 如何在Vue JS的lifehooks循环中获得道具的价值和使用

我正在寻找一种方法，通过一些Lifehook获得

props

值，比如

mounted

或

updated

，并尝试用我的

v-model

和一些字符串保存值。但是我不能得到它

虽然我用

道具
值和一些字符串在输入元素上尝试了
：value
，但似乎没有
v-model
，我无法访问它，因为我研究了
v-model
和
：value
不能在一起

其目的是获取
输入
标记的
值
（使用props和一些字符串）

父组件

<invite :user_token="user_token"/>

export default {
    props: ['user_token'],

    data() {
        return {
            link: ''
        }
    },

    mounted() {
        console.log(this.user_token);
        this.link = `"http://localhost/johndoe-vue/public/#/invite${this.user_token}"`;
    },
    updated() {
        console.log(this.user_token);
        this.link = `"http://localhost/johndoe-vue/public/#/invite${this.user_token}"`;
    }
}

您是否尝试过
$emit
此链接。可以通过组件的
$Props
属性访问该链接。您可以像这样引用它：
this.$props.[property name]
$props
称为实例属性；它们有很多，每个都可以通过这种方式访问。看

请记住，Vue生命周期方法有些不一致。哪些实例属性可访问取决于方法（即：您不能在
已创建（…）
中引用
$el
）。
欢迎来到SO Nigel

你在找这样的东西吗

ParentComponent.vue

<template>
    <div id="wrapper">
        <invite :userToken="userToken"></invite>
    </div>
</div>
<script>
import Invite from "@/Invite.vue";
export default {
    components: {
        Invite
    },
    data() {
        return {
            userToken: "fooBar",
        };
    }
}
</script>

<template>
    <div id="wrapper">
        <p v-if="inviteLink != ''">{{ inviteLink }}</p>
    </div>
</template>
export default {
    props: {
        userToken: {
            type: String,
        }
    },

    data() {
        return {
            inviteLink: ""
        }
    },

    created() {
        if(this.userToken != "") {
            this.inviteLink == "/your-link-here/"+this.userToken;
        }
    }

}


从“@/Invite.vue”导入邀请；
导出默认值{
组成部分：{
邀请
},
数据（）{
返回{
userToken:“fooBar”，
};
}
}

ChildComponent.vue

<template>
    <div id="wrapper">
        <invite :userToken="userToken"></invite>
    </div>
</div>
<script>
import Invite from "@/Invite.vue";
export default {
    components: {
        Invite
    },
    data() {
        return {
            userToken: "fooBar",
        };
    }
}
</script>

<template>
    <div id="wrapper">
        <p v-if="inviteLink != ''">{{ inviteLink }}</p>
    </div>
</template>
export default {
    props: {
        userToken: {
            type: String,
        }
    },

    data() {
        return {
            inviteLink: ""
        }
    },

    created() {
        if(this.userToken != "") {
            this.inviteLink == "/your-link-here/"+this.userToken;
        }
    }

}


{{{inviteLink}
导出默认值{
道具：{
用户令牌：{
类型：字符串，
}
},
数据（）{
返回{
邀请链接：“
}
},
创建（）{
如果（this.userToken！=“”）{
this.inviteLink==“/此处的链接/”+this.userToken；
}
}
}

另外，您应该查看。他们已将多单词组件名称标记为必需。您的
Invite
组件应重命名为
BaseInvite
或类似的名称。
否，我正在将用户令牌从父组件传递给子组件，并且该用户令牌将在子组件中使用。好的，我明白了d将
user\u-token
添加到``data:（）{return:{link:''，user\u-token:'}}注意到，让我试试这个，来自props的
user\u-token
将保存到
data（）{}中的新变量中
？没错。重点是先初始化它。我按照你上面说的做了。我试过。
令牌：这个。用户令牌
然后我在我的html上调用它，它看起来像
令牌
是空的，无法获取
用户令牌
。你问的问题还不完全清楚。
v-model
是从哪里来的？你的
console.log（）
调用未按预期工作？您似乎没有使用
链接执行任何操作。我的链接来自子组件。
。当
console.log（）不工作时，我无法在
console.log（）上显示
props
用户令牌
我尝试添加
$props
，但仍然无法将其保存在我的
v-model
链接上。您是否尝试将v-model添加到组件中？您需要明确写出v-model在将修改数据的组件上所做的操作。文档中有一个示例。无论哪种方式，都会引用类似
的props。[属性名称]
将不起作用；您必须首先使用
this.$props.[prop name]
引用实例属性。您甚至可以在组件的模板内执行此操作，如
用户令牌：{{$props.User\u Token}
。是的，它正在将其显示在模板中。但是，如果我想在我的
v-model
链接中引用某个虚拟链接+
用户令牌
，该怎么办？这样，当我在浏览器上看到
时，它就具有我在
v-model
链接中引用的值。听起来你不知道实际上并不需要v-model，而是一个观察者或计算值。v-model通常用于双向绑定，这看起来不像您正在做的（我可能会误解）。