vue父子传值、调用子组件方法

最新推荐文章于 2024-08-29 20:00:00 发布

原创

最新推荐文章于 2024-08-29 20:00:00 发布 · 484 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue传值

父组件可以使用props把数据传给子组件
子组件可以使用$emit，让父组件监听到自定义事件

<!-- 父组件 -->
<template>
    <div>
        <!-- v-on:test="..."（缩写为@test）  子组件方法 = 父组件方法 -->
        <argument ref="argument" :argumentId='..绑定的值..' :content='..绑定的值..' @test="loading"/>       
    </div>
</template>

<script>
import argument from '...'   // 引入

export default {
    name: '...',
    components: {
      ...       // 注册组件  
    },
    methods: {
        loading(val) {      // val为传过来的值
            ...             // 对val进行处理
        }
        test() {
            // 调用子组件方法
            this.$refs.父组件绑定的ref值.方法
        }
    }
}

</script>


<!-- 子组件 -->
<template>
    <div>
        
        
    </div>
</template>

<script>
export default {
    props: {                    
        // 父传子的方法
        'argumentId': Number,