父组件向子组件传递数据使用子组件的props属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    key=value  获取静态数据-->
<!--    :key=value  获取父组件中的数据-->
<!--    @key=value  给子组件绑定父组件的事件-->
    <login title="我是静态标题" :name1="name" @test="test1"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = Vue.component('login',{
        template:`<div><h2 @click="test">用户登录 ==> {{title}} ===> {{name1}}</h2></div>`,
        data(){
            return{
            }
        },
        props:['title','name1'],
        methods:{
            test(){
                alert("我是子组件的方法");
                this.$emit('test');
            }
        }
    });


    new Vue({
        el:"#app",
        data:{
            msg:"gzy",
            name:"动态获取父组件的title"
        },
        methods:{
            test1(){
                alert("我是父组件中的方法");
            }
        }
    });
</script>


子组件向父组件传递数据通过方法传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    //子组件调用父组件的方法，驼峰命名法不能调用，要将其改为小写-->
<!--    @key=value(方法名) 向子组件传递方法-->
    <login @testParent="testParent"></login>

</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    //全局子组件
    const login = Vue.component('login',{
        template:`<div><h2><button @click="testChild">我是子组件</button></h2></div>`,
        data(){
            return {
                msg:"我是子组件中的信息"
            }
        },
        methods:{
            testChild(){
                alert("我是子组件的testChild方法");
                //子组件调用父组件的方法，驼峰命名法不能调用，要将其改为小写
                //这里emit里的字符串填写的时子组件@后的字符串
                //将子组件里的数据可以通过参数回传给父组件
                this.$emit('testparent',this.msg);
            }
        }
    })

    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件的信息"
        },
        methods:{
            //子组件回传数据需要用被子组件传递的方法接受参数
            testParent(msg){
                alert("我是父组件中的方法testParent");
                alert(this.msg);
                this.msg = msg;
                alert(this.msg);
                alert("子组件向父组件传递参数成功");
            }
        }
    });
</script>


总结

1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值
3.使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化
4.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
5.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
6.在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用