Vue 父组件与子组件之间组件传值

子组件默认无法访问到父组件中的data上的数据和methods中的方法

1. 父组件向子组件传值， 通过props

<div id="app">
    <com1 v-bind:parentmsg="msg"></com1>    //父组件可以在引用子组件的时候，通过v-bind：，以属性绑定的方式将需要传递给子组件的数据传递到子组件内部，供子组件使用
</div>
<script>
   var vm = new Vue ({
       el: '#app',
       data: {
        msg: '父组件中的数据'
       },
       methods: {},
       components: {
           com1: {
            // 注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的
            // data上的数据都是可读可写的
            data() {
                return {
                    title: '123'
                }
            },
            template: '<h1>子组件</h1>',
            // 注意：组件中所有props中的数据都是通过父组件传递给子组件的
            // props中的数据都是只读的，无法重新赋值
            props: [parentmsg],  //把父组件传递过来的parentmsg属性先在props数组中定义一下，这样才能使用这个数据
            methods: {}
           }
       }
   })
</script>

2. 子组件向父组件传值，通过事件的调用 （父组件向子组件传递方法，子组件调用该方法，同时将子组件的数据当做方法的参数传递回父组件）

<div id="app">
    <!-- 父组件向子组件传递方法，采用事件绑定机制:v-on，当我们自定义了一个事件属性之后，子组件就可通过某种方式来调用传递进去的这个方法 -->
    <com2 @func= "show"></com2>
</div>
<script>
   var vm = new Vue ({
       el: '#app',
       data: {},
       methods: {
           show() {
               console.log('调用了父组件身上的show方法');
               
           }
       },
       components: {
           com2: {
               template: '<div><h1>这是子组件</h1><input type="button" value="子组件中的按钮，点击触发父组件传递的func方法" @click="myclick"></div>',
               methods: {
                   myclick() {
                       this.$emit('func')   // emit英文原意：触发，调用
                   }
               }
           }
       }
   })
</script>

传递数据

<div id="app">
    <com2 @func= "show"></com2>
</div>
<script>
   var vm = new Vue ({
       el: '#app',
       data: {
        dataFromSon=null
       },
       methods: {
           show(data) {
               this.dataFromSon= data  // 将子组件传递来的数据与父组件中的data绑定
           }
       },
       components: {
           com2: {
               template: '<div><h1>这是子组件</h1><input type="button" value="子组件中的按钮，点击触发父组件传递的func方法" @click="myclick"></div>',
               data() {
                   return {
                       John: {age:8, habbit: 'basketball'}
                   }
               },
               methods: {
                   myclick() {
                       this.$emit('func', this.John)   // emit英文原意：触发，调用
                   }
               }
           }
       }
   })
</script>