13.3，父子组件

父组件向子组件传值

<div id="app">
<mycode></mycode>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123-父组件中的值'
        },
        components:{
            mycode:{
                template:'<h1>这是一个子组件--{{msg}}</h1>'
            }
        }
    })
</script>

这种方式无法实现组件之间的传值问题，也就是说子组件中默认是无法访问到父组件中的数据和methods中的方法

实现方法

父组件可以在引用子组件的时候使用属性绑定的形式（v-bind），将需要的数据以属性绑定的形式，传递到子组件中，供子组件使用

1. <mycode :parentmsg='msg'></mycode>
2. 在子组件内部创建props数组，将这个自定义的属性放到这个数组里面，即可访问

<div id="app">
<mycode :parentmsg="msg"></mycode>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123-父组件中的值'
        },
        components:{
            mycode:{
                template:'<h1>这是一个子组件--{{parentmsg}}</h1>',
                props:['parentmsg']
            },
        }
    })
</script>

注意：组件中的所有props中的数据，都是父组件传给子组件的。data中的数据都是子组件自定义的，比如子组件通过ajax传入的数据，都可以放好data身上

总结，父组件想向子组件传递数据，需要将数据在子组件的引用标签中使用数据绑定的形式绑定给子组件，然后在子组件中使用props数组，将属性名称定义在其中，这样子组件就可以获取其中的数据

1. 在子组件的引用中使用数据绑定将数据绑定给子组件
2. 在子组件的props数组中定义对应的字符串
3. 这样子组件就可以使用其中的数据了

父组件将方法传给子组件

1. 父组件向子组件传递的方法，使用事件绑定机制
2. @func="show"，func是子组件中存储的方法名，show是父组件传递给子组件的方法名，注意的是如果是show()表示将方法的执行结果返回给func，但是不带（）就是将该方法的引用传递给func，也就是说，这个地方无论是否需要传入参数，都不加()
3. 子组件调用时可以使用this.$emit('')其中写的是传入的方法名，第二个参数往后，就可以传入该方法需要的对应的参数