Vuejs 组件――props数据传递的实例代码

本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

props数据传递

①组件实例的作用域：

是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。

<p id="app"> 
  <add></add> 
  <del></del> 
</p> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      "add": { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      }, 
      del: { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "456"}; 
        } 
      } 
    } 
  }); 
</script> 

渲染结果是：

2个按钮，第一个的值是123，第二个的值是456（虽然他们都是btn）

②使用props绑定静态数据：

【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。

【2】下面示例中的写法，不能传递父组件data属性中的值

【3】会覆盖模板的data属性中，同名的值。

无相关信息