vue组件间传值

父组件给子组件传值：

1.在父组件中给子组件绑定一个自定义属性

2.在子组件中使用props来接收自定义属性 props可以为对象也可以为数组。使用props来接收自定义属性后 属性会自动添加至组件实例中 可以直接使用

 3.当props为对象时表示需要对接受的自定义属性进行验证数据类型

<div id="app">
        <child :gf='girlFriend' :age='age'></child>
    </div>

    <!-- template模板 -->
    <template id="child">
        <div>
            <h1>我是一个子组件</h1>
            <h2>{{name}}的女朋友是{{gf}}喜欢{{like}}她在{{name}}心中永远{{age}}</h2>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        // 组件与组件之间数组是私密的 只供当前组件使用

        let child = {
                template: '#child',
                props: ['gf', 'age'],
                data() {
                    return {
                        like: '打游戏',
                        name: "张三"
                    }
                }
            }
            // 
        Vue.component('child', child)
            // 
        new Vue({
            el: '#app',
            data: {
                girlFriend: '迪丽热巴',
                age: 18,
            }
        })
    </script>

子组件向父组件传值：

     1.在父组件中的子组件上绑定自定义事件

      2.在子组件中使用this.$emit将自定义事件发送给父组件

      3.在父组件methods中接受自定义子事件

<div id="app">
        <h1>我是子组件传过来的值：{{childvalue}}</h1>
        <h3>
            姓名：{{user.name}} 性别:{{user.sex}} 年龄:{{user.age}}
        </h3>
        <child @msgs='getmsg' @getuser='getuser'></child>
    </div>
    <template id="child">
        <div>
            <h1>我是一个子组件{{msg}}</h1>
            
            <button @click='sendMsg'>向父组件传递数据</button>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        let child = {
            template: '#child',
            data() {
                return {
                    msg: '葫芦娃',
                    user: {
                        name: '张三',
                        age: 18,
                        sex: '男',
                    }
                }
            },
            // 生命周期--页面渲染后
            mounted() {
                this.$emit('getuser', this.user);
            },
            methods: {
                sendMsg() {
                    // 参数1 自定义事件名称 参数2 想要传递的数据
                    this.$emit('msgs', this.msg)
                },

            },

        };
        Vue.component('child', child)
            // 
        new Vue({
            el: '#app',
            data: {
                childvalue: '',
                user: {
                    name: '',
                    sex: '',
                    age: '',
                },
            },
            methods: {
                // 在父组件methods中接受自定义子事件
                // value是子组件传递过来的数据
                getmsg(value) {
                    console.log(value);
                    this.childvalue = value;
                },
                getuser(value) {
                    console.log(value);
                    this.user = value
                }
            }
        })
    </script>

非父子组件间传递数据：

        1、创建一个新的空vue实例

        2、传递数据：在想要传递数据的组件中使用新vue实例名称.$emit向新的空的vue实例中发送一个自定义事件

        （bus.$emit('getMsg', this.msg)  参数1 自定义事件名称 参数2 想传递的数据）

        3、接受数据：在想要接收数据的组件中使用 新vue实例名称.$on使vue实例来接受自定义事件

         bus.$on('getTitle', (value) => {}  参数1 自定义事件名称 参数2回调函数  value 传递过来的数据