Vue父、子组件之间传值原理

Vue组件之间传值

（1）父组件向子组件传值

理解
1.1、Model部分新创建的vm实例可以看作一个组件，即父组件，在内部定义的components是它的子组件。

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        msg: '123 啊-父组件中的数据'
      },
      methods: {
    },

      components:
        com1: {
    
          template: '<h1>这是子组件 --- {
    { parentmsg }}</h1>',
          props: ['parentmsg'],
          methods: {
    
            change() {
    
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

1.2、view部分 div#app 受父组件控制，里面的com1受子组件控制。

<div id="app">
    <com1></com1>
  </div>

1.3、子组件中，默认无法访问父组件中 data 中的数据和 method中的方法
那如何将父组件的值传递给子组件呢？
2.1、在view部分通过属性绑定的（v-bind)的形式，把需要传给子组件的数据，以属性绑定的方式，传递给子组件

<div id="app">
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

2.2、model部分，在子组件template中获取父组件传给子组件的属性，
不过要注意父组件传过来的属性，现在props数组中，定义一下，这样才能使用数组，不然会报错

components: {
        com1: 
          template: '<h1>