javascript - 我在 data 属性中有一个变量，并从 prop 传递相同的变量。为什么 {{}} 模板显示 prop 中的值而不是 data

Question

在 vue.js 2.0 组件中。该组件定义如下:

//html
<div id="#foo">{{ foo }}</div>

// js
Vue.component('my-foo',{
    template: '#foo',
    props:['foo'],
    data: function(){
         return {
            foo: 'from own',
         };
    }
);

它只会显示来自 Prop 的数据:

<my-foo foo="from father"></my-foo>

<div id="foo">from father</div>

我认为在函数作用域中，两个相同的变量让我很困惑，我的“foo”在data中的哪里。有人可以给我详细解释一下吗。如果我有两个相同的数据会发生什么？提前致谢。

<小时/>

编码已更改，出现一些错误。

Answer 1

一般来说，一个 prop 会覆盖同名的数据项。您的示例并没有真正显示这一点，因为您的组件没有声明任何 Prop 。您传递的属性只是一个属性，因为 Vue 没有理由将其视为 Prop 。我不知道你是如何得到你所得到的结果的。请注意，您的模板的 {{}} 内没有任何内容。

下面是一些示例代码，显示了两个组件。两者都声明一个数据项foo；其中声明了一个 prop foo。您可以看到当使用和不使用 prop 调用每个函数时会发生什么。

Vue.component('my-foo', {
  template: '#foo',
  data: function() {
    return {
      foo: 'from data',
    };
  }
});

Vue.component('my-propfoo', {
  template: '#foo',
  data: function() {
    return {
      foo: 'from data',
    };
  },
  props: ['foo']
});

new Vue({
  el: '#app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<template id="foo"><div>-> {{foo}}</div></template>
<div id="app">
  <div>No prop declared or passed:</div>
  <my-foo></my-foo>
  <div>No prop declared, but prop passed:</div>
  <my-foo foo="from prop"></my-foo>
  <div>Prop declared, no prop passed:</div>
  <my-propfoo></my-propfoo>
  <div>Prop declared, prop passed:</div>
  <my-propfoo foo="from prop"></my-propfoo>
</div>