Vue day05

1.父组件传值子组件

设置props属性就可以接受父组件传值

2.子组件传值父组件

子组件调用父组件的方法

1.在父组件中给 引用的子组件 注册 一个事件（这个事件的名字是自定义的）
2.子组件可以触发这个事件$emit(‘事件名字’)

子组件给父组件传递数据

1.$emit方法第二个参数可以定义子组件给父组件传递的内容2.在父组件中怎么拿到这内容（1）父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到（2）父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<!-- 2、视图层 -->
    <div id="app">

        <father></father>

    </div>
    <template id="father">
        <div>
            <!-- 父组件中写一个自定义属性 -->
            <son :toson="toSon" @tofather="tofather($event,1)"></son>
        </div>
    </template>
    <template id="son">
        <div>
            <button @click="toFather">toFather</button>
            {{msg}}
        </div>
    </template>
    <script>
        Vue.component('father', {
            template: '#father',
            methods: {
                tofather(data) {
                    console.log(data);
                }
            },
            data() {
                return {
                    toSon: { name: 1 }
                }
            },
            methods: {
                tofather(data, params) {
                    console.log(data);
                    console.log(params);
                    console.log(event);
                }
            }
        })
        Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: ""
                }
            },
            // <!-- 设置props属性就可以接受父组件传值 -->
            props: {
                toson: [String, Number],
                toson: {
                    type: [String, Number],
                    dafault() {//改成回调函数
                        return {

                        }
                    }
                }
            },
            methods: {
                toFather() {
                    // 第一个参数 自定义事件名，第二个参数：要传递的参数
                    // this.$emit('tofather', 去father, 去father2)
                    this.$emit('tofather', { name: 'zg' })


                },
            },
            created() {
                this.$emit('tofather', '去father')
                console.log(this.toson);
                this.msg = this.toson
            },
        })

        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                msg: 'hello Vue',

            },
            // 方法
            methods: {}
        })

3.ref的使用

获取dom节点

1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2. 加上ref之后，在$refs属性中多了这个元素的引用。
3. 通过vue实例的$refs属性拿到这个dom元素。

获取组件

4.给组件记上ref属性，可以理解为给组件起了个名字。
5. 加上ref之后，在 $refs 属性中多了这个组件的引用。
6. 通过vue实例的 $refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

<!-- 2、视图层 -->
    <div id="app">
        <div id="text" ref="text">今天放假了</div>
        <son ref="son"></son>

    </div>
    <template id="son">
        <div>{{msg}}
            <button @click="log1">log1</button>
        </div>
    </template>
    <script>
        Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: '202022wawwa'
                }
            },
            methods: {
                log1() {
                    console.log(1);
                    return 1
                }
            }
        })
        // console.log(document.getElementById('text'));
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                msg: 'hello Vue',

            },
            // 方法
            methods: {
                log1() {
                    console.log(1);
                    return 1
                }
            },
            created(){
                console.log(this.$refs);
            },
            // 第一个dom元素处里
            // 安装
            mounted() {
                  console.log(this.$refs.son.log1());
                this.$refs.text.style.color = 'blue'
            }
        })

4.method,computed,watch

watch用法

监听data中属性的改变；
监听路由对象的改变；

Computed用法

默认只有getter的计算属性：
定义有getter和setter的计算属性：
** method、computed和watch的区别**
1.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2.methods方法表示一个具体的操作，主要书写业务逻辑；
3.watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

 //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                firstName: '',
                lastName: '',
                // name: '',
                obj: {
                    name: 'zg',
                    age: 1
                }//监听不到obj的name属性，需要deep进行深度监听
            },

            // 方法
            methods: {
                add() {
                    // this.name = this.firstName + '-' + this.lastName
                    // return this.name
                }
            },
            watch: {
                // 自定义指令名：
                // firstName: function (val) {
                //     console.log(val);
                //     this.name = this.firstName + '-' + this.lastName
                // },
                // lastName: function (val) {
                //     console.log(val);
                //     this.name = this.firstName + '-' + this.lastName
                // }
                obj: {
                    deep: true

                },
                firstName: {
                    handler(a, b) {
                        console.log(a);
                        console.log(b);
                    },
                    immediate: true,
                    // deep: true
                    // 深度监听才能
                }
            },
            computed: {
                // 计算的属性，不能在data中定义
                // name(){
                //     return this.firstName + '-' + this.lastName
                // }

                name: {
                    get() {
                        return this.firstName + '-' + this.lastName

                    },
                    set(c) {
                        console.log(c);
                        console.log(c.split('-'));
                        this.firstName = c.split('-')[0]
                        this.firstName = c.split('-')[1]
                    }
                }
            },
            // 生命周期
            created() {
                // this.name = this.firstName + '-' + this.lastName
            },//不显示
            beforeUpdate() {
                // this.name = this.firstName + '-' + this.lastName
            },
            updated() {
                // this.name = this.firstName + '-' + this.lastName
            }
        })