不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

vue—父调子 $refs (把父组件的数据传给子组件)

web 建伟 3728℃ 0评论

App.vue 父组件

Hello.vue 子组件

/*App.vue :*/
<template>
    <div id="app">
        <input type="button" name="" id="" @click="parentCall" value="父调子" />
        <hello ref="chil" />//hello组件
    </div>
</template>

<script>
    import hello from './components/Hello'
    export default {
        name: 'app',
        'components': {
            hello
        },
        methods: {
          parentCall () {
            this.$refs.chil.chilFn('我是父元素传过来的')
          }
        }
    }
</script>

/*Hello.vue  :*/

<template>
    <div class="hello"></div>
</template>

<script>
    export default {
        name: 'hello',
        'methods': {
         chilFn (msg) {
         alert(msg)
        }
        }
    }
</script>

转载请注明:Li Jianwei's Blog » vue—父调子 $refs (把父组件的数据传给子组件)

喜欢 (1)or分享 (0)
web技术交流群
22765697