Javascript Vue:“_&引用；前缀属性在数据属性中不起作用

我正在尝试将计算属性设置为Vue.js中的子组件的道具

这是组件代码（）的摘录：

const ShowMe={
数据（）{
返回{
_标题：空
}
},
计算：{
标题：{
设置：功能（val）{
这个。_title=val；
},
get:function（）{
返回此标题；
}    
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};
const vm=新的Vue({
el:“#应用程序”，
数据：{
阿提特尔：“头衔”
},
组成部分：{
‘show me’：show me
}
});

运行示例时，模板中的组件标题值未定义。这是非常简单和直接的，我不明白为什么它不工作

_前缀属性是为Vue的内部属性保留的。它们不可用于直接绑定（但您可以根据需要绑定到它们） $data.\u消息）-Evan You（Vue创建者）

不能使用前缀值，因为它在vue系统中被视为内部属性

参考-

最恰当的解释也可以在文档中找到-

以u或$开头的属性将不会在Vue上代理 实例，因为它们可能与Vue的内部属性和 API方法。您必须以vm.$data.\u属性访问它们

因此，在您的情况下，您将使用

this.$data.\u title

替换

this.\u title

const ShowMe = {
  data() {
    return {
      _title: null
    }
  },
  computed: {
    title: {
      set: function(val) {
        this.$data._title = val;
      },
      get: function() {
        return this.$data._title;
      }    
    }
  },
  template: `
    <div>
      should display title: {{title}} <br/>
      but instead typeof title: {{typeof title}}
    </div>`
};

const vm = new Vue({
  el: '#app',
  data: {
    aTitle: 'A Title'
  },
  components: {
    'show-me': ShowMe
  }
});

const ShowMe={
数据（）{
返回{
_标题：空
}
},
计算：{
标题：{
设置：功能（val）{
此.$data.\u title=val；
},
get:function（）{
返回此.$data.\u标题；
}    
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};
const vm=新的Vue({
el:“#应用程序”，
数据：{
阿提特尔：“头衔”
},
组成部分：{
‘show me’：show me
}
});

_前缀属性是为Vue的内部属性保留的。它们不可用于直接绑定（但您可以根据需要绑定到它们） $data.\u消息）-Evan You（Vue创建者）

不能使用前缀值，因为它在vue系统中被视为内部属性

参考-

最恰当的解释也可以在文档中找到-

以u或$开头的属性将不会在Vue上代理 实例，因为它们可能与Vue的内部属性和 API方法。您必须以vm.$data.\u属性访问它们

因此，在您的情况下，您将使用

this.$data.\u title

替换

this.\u title

const ShowMe = {
  data() {
    return {
      _title: null
    }
  },
  computed: {
    title: {
      set: function(val) {
        this.$data._title = val;
      },
      get: function() {
        return this.$data._title;
      }    
    }
  },
  template: `
    <div>
      should display title: {{title}} <br/>
      but instead typeof title: {{typeof title}}
    </div>`
};

const vm = new Vue({
  el: '#app',
  data: {
    aTitle: 'A Title'
  },
  components: {
    'show-me': ShowMe
  }
});

const ShowMe={
数据（）{
返回{
_标题：空
}
},
计算：{
标题：{
设置：功能（val）{
此.$data.\u title=val；
},
get:function（）{
返回此.$data.\u标题；
}    
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};
const vm=新的Vue({
el:“#应用程序”，
数据：{
阿提特尔：“头衔”
},
组成部分：{
‘show me’：show me
}
});

const ShowMe={
道具：{
标题：{
类型：字符串，
必填项：true
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};

或者您可以简单地使用以下命令

const ShowMe = {
          props:['title'],
          template: `
            <div>
              should display title: {{title}} <br/>
              but instead typeof title: {{typeof title}}
            </div>`
        };

const ShowMe={
道具：['title']，
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};

const ShowMe={
道具：{
标题：{
类型：字符串，
必填项：true
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};

或者您可以简单地使用以下命令

const ShowMe = {
          props:['title'],
          template: `
            <div>
              should display title: {{title}} <br/>
              but instead typeof title: {{typeof title}}
            </div>`
        };

const ShowMe={
道具：['title']，
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};

此代码有效。更一致的做法是避免使用

this.$data

，尽管另一个答案是正确的，因为您当然可以使用它。最好完全避免使用下划线，并找到更好的命名约定。本例中的命名也不是最佳实践

const ShowMe = {
  data() {
    return {
      cTitle: null
    }
  },
  computed: {
    title: {
      set: function(val) {
        this.cTitle = val;
      },
      get: function() {
        return this.cTitle;
      }    
    }
  },
  template: `
    <div>
      should display title: {{title}} <br/>
      but instead typeof title: {{typeof title}}
    </div>`
};

const vm = new Vue({
  el: '#app',
  data: {
    aTitle: 'A Title'
  },
  components: {
    'show-me': ShowMe
  }
});

const ShowMe={
数据（）{
返回{
cTitle:空
}
},
计算：{
标题：{
设置：功能（val）{
this.cTitle=val；
},
get:function（）{
退回这个.cTitle；
}    
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};
const vm=新的Vue({
el:“#应用程序”，
数据：{
阿提特尔：“头衔”
},
组成部分：{
‘show me’：show me
}
});

此代码有效。更一致的做法是避免使用

this.$data

，尽管另一个答案是正确的，因为您当然可以使用它。最好完全避免使用下划线，并找到更好的命名约定。本例中的命名也不是最佳实践

const ShowMe = {
  data() {
    return {
      cTitle: null
    }
  },
  computed: {
    title: {
      set: function(val) {
        this.cTitle = val;
      },
      get: function() {
        return this.cTitle;
      }    
    }
  },
  template: `
    <div>
      should display title: {{title}} <br/>
      but instead typeof title: {{typeof title}}
    </div>`
};

const vm = new Vue({
  el: '#app',
  data: {
    aTitle: 'A Title'
  },
  components: {
    'show-me': ShowMe
  }
});

const ShowMe={
数据（）{
返回{
cTitle:空
}
},
计算：{
标题：{
设置：功能（val）{
this.cTitle=val；
},
get:function（）{
退回这个.cTitle；
}    
}
},
模板：`
应显示标题：{{title}}

而是typeof title:{{typeof title}}
`
};
const vm=新的Vue({
el:“#应用程序”，
数据：{
阿提特尔：“头衔”
},
组成部分：{
‘show me’：show me
}
});

此代码将允许您在中初始化

<div id="app">
  <show-me :title="aTitle" @changeTitle="aTitle = $event"></show-me>
</div>