Question

刀片

<login></login>

app.js代码

const app = new Vue({
    el: '#app',
    data: {
        domain_Name: document.body.querySelector("div[id='Domain_Name']").innerHTML
    }
});

组件代码

<template>
    <div>

    </div>
</template>

<script>
    export default {
        props: ['domain_Name'],
        methods: {            
            ValidateUser() {
                debugger;
                //this.domain_Name is null here
            }
        }
    }
</script>

我可以确认下面的代码包含有效值而不是未定义。

document.body.querySelector("div[id='Domain_Name']").innerHTML

此代码存在于许多组件中，因此尝试将其转移到单个集中位置

Answer 1

您必须将domain_Name传递给<login></login>组件。

您可以使用props执行此操作，但请等待：HTML属性不区分大小写。

这意味着要domain_Name按原样工作，您需要声明如下：

<login :domain_-name="domain_Name"></login>

怪异。

Vue确实显示了建议：

[Vue提示]：道具＆＃34; domain_name＆＃34;传递给组件<login>，但声明的道具名称是＆＃34; domain_Name＆＃34;。请注意， HTML属性不区分大小写，并且在使用in-DOM模板时，camelCased props需要使用其kebab-case等价物。您应该使用＆＃34; domain_-name＆＃34;而不是＆＃34; domain_Name＆＃34;。

虽然上面会有效，但为了获得更清晰的代码，我的建议是：

将:domain_-name="domain_Name"道具改为:domain-name="domain_Name";
更改props: ['domain_Name']，props: ['domainName'],

并且，在组件内部，使用this.domainName。

下面的演示。

＆＃13;

Vue.component('login', {
  template: '#login-tpl',
  props: ['domainName'],
  methods: {            
    ValidateUser() {
		  console.log('domain name:', this.domainName);
    }
  }
});
new Vue({
  el: '#app',
  data: {
    domain_Name: document.body.querySelector("div[id='Domain_Name']").innerHTML
  }
})

＆＃13;

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

<template id="login-tpl">
    <div>
      <button @click="ValidateUser">CLICK ME AND CHECK CONSOLE</button>
    </div>
</template>

<div id="app">
  <login :domain-name="domain_Name"></login>
</div>

<div id="Domain_Name">www.example.com</div>

＆＃13;

Answer 2

在实例化data属性时，假设尚未填充Domain_Name div。相反，您可以在mounted lifecycle hook上进行设置。

const app = new Vue({
    el: '#app',
    data: {
        domain_Name: null        
    },
    mounted(){
       this.domain_Name = document.body.querySelector("div[id='Domain_Name']").innerHTML
    }

});

公共属性在组件中不可访问且显示未定义

2 个答案: