Vue 传递

今天刷了一遍Vue的API，做个小笔记

父子传递数据时，父组件里标记要传的数据，子组件里用props获取，子组件用$emit(‘func’,args)发布事件，父组件用@func接收。

方法一

parent.vue:



child.vue

方法二

或者子组件直接用 $props 和 $attrs 进行获取属性

方法三

使用$parent/$children

方法四

父组件使用，然后this.$refs.name 则可以获取子组件的信息(props等)

例:

parent.vue

<template>

    <div>

        <h1>我是父组件</h1>

        <child ref="child"></child>

    </div>

</template>

<script>

    import child from './child'

    export default{

        components:{ child },

        methods:{

            parent(){

                this.$.refs.child.childFn()

            }

        }

    }

</script>

child.vue

<template>

    <div>

       <h2>我是子组件</h2>

    </div>

</template>

<script>

    import child from './child'

    export default{

        components:{ child },

        methods:{

            childFn(){

                alert('父组件调用了我')

            }

        }

    }

</script>