vue中父子组件相互操作问题

父组件向子组件传值

在父元素向子元素传值过程中，需要用到一个很重要的属性，即 props，接收值为一个数组或对象，用于获取父组件的数据。props 接收的值不可含有大写字母，否则无法识别
接下来，我们看一个实例用于了解此过程。
在看本实例时，子组件与父组件的交互是在 son 标签上用 : 进行的

<div id="app">
        <!-- 将父元素内的 giveSun 与 props 内的 fathermsg 绑定，再次强调，此处的 fathermsg 不可以大写 -->
        <son :fathermsg='giveSun'></son>
    </div>
    <script>
        // 子组件，在父组件中调用
        let son = {
            // 生成模板，此处的 fathermsg 在上面组件中已经与 giveSun 绑定
            template: `
                <div>
                    {{fathermsg}}
                </div>
            `,
            props: ['fathermsg'] // !!
        }
        // 父组件
        new Vue({
            el: '#app',
            data () {
                return {
                    // 传递的数据
                    giveSun:'hello,my son' 
                }
            },
            components: { // 调用子元素，并生成组件
                'son': son
            }
        })
    </script>

子组件向父组件传值

我们先来介绍一个方法，在子元素中调用父元素的方法
重点在 $emit 上。
与上面的 props 类似，$emit 也用来操作标签上父子元素绑定的事件

    <div id="app">
        <!-- 父元素内的 num -->
        {{num}}
        <!-- @sunadd='add' 的作用是将子组件中的 sunadd 与父组件中的 add 联系起来 -->
        <son @sunadd='add'></son>
    </div>
    <script>
        let son = {
            template: `
            // 触发点击事件
            <button @click='sunadd'>增加</button>
            `,
            methods: {
                sunadd () {
                // 获取标签内的父子元素绑定关系，并通过 sunadd 去调用父元素中的 add 方法并执行,
                //其中 $emit 的作用实际就是获取标签中的绑定关系并执行绑定的父元素中的事件
                this.$emit('sunadd')
            }
            }
        }
        new Vue({
            el: '#app',
            data () {
                return {
                    num: 0
                }
            },
            // 父子组件绑定
            components: {
                'son': son
            },
            methods: {
                // 父组件定义事件
                add () {
                    this.num ++
                }
            }
        })
    </script>

这虽然也是一种解决方法，但如果我们想向父元素传递一个值时，可以在 this.$emit('sunadd') 后追加参数，并在父类方法中传入一个参数

我们接下来来看另外一种方法，用于在父元素中拿到子元素的值，ref
重点在于 ref 在子元素的声明，以及父元素中 $refs 的获取

<div id="app">
      <!-- 在此处定义一个 ref，之后便于父元素获取 -->
    <son ref='sonref'></son>
</div>
<script>
    let son = {
        data () {
            return {
                sun: '这是子元素的内容'
            }
        },
        template: `
        // 触发点击事件
        <div>测试</div>
        `,
        methods: {
           
        }
    }
    new Vue({
        el: '#app',
        data () {
            return {
                num: 0
            }
        },
        // 父子组件绑定
        components: {
            'son': son
        },
        mounted () {
            // 此处，可以通过 `this` 中的 `$refs` 来得到子元素中 `ref` 绑定的值，从而获取到子元素的 `vue` 对象
            console.log(this.$refs.sonref.sun)
        }
    })
</script>