vue组件之间的传参总结

之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客

一、父传子（prop）

第一步：在父组件中定义数据，例：tohome

 data () {
    return {
      tohome:"给home组件传值",
    }
  },

第二步：在<v-home>上绑定个属性，例:title

<v-home :title="tohome"></v-home>

第三步：子组件利用props接收父组件的传值

 方法一 props:{
      'title':String,
      'bool':Boolean,
      'getFun':Function
  },
 方法二 props:['title','bool','getFun','parent']

第四步：在子组件上绑定传过来的数据

<p>{{title}}</p>

二、子传父（$meit）

子组件

<template>
    <div>
        <span>我是子组件</span>
        <button @click="btnClick">点击后给父组件传参</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            aa:'我是子组件上的信息'
        }
    },
    methods:{
        btnClick(){          
          this.$emit('itemfun',this.aa)
        }
    }
}
</script>

父组件

<template>
    <div>
        <span>我是父组件</span>
        <v-home @itemfun='getapp'></v-home>
        <span>{{data}}</span>
    </div>
</template>

<script>
import home from '../../home'
export default {
    components:{
        'v-home':home
    },
    data(){
        return {
            data:''
        }
    },
    methods:{
        // 获取子组件填写好的值
        getapp(val){
            this.data=val
        }
    }
}
</script>

注:如果子组件没有点击事件给父组件传参，可以使用watch监听

子组件

<template>
    <div>
        <span>我是子组件</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            aa:''
        }
    },
    // 监听父组件有没有获取到值
    watch: {
        aa: {
            handler (n, o) {
                this.$emit('itemfun', n);
            },
            deep: true
        }
    },
    mounted(){
        this.aa="我是子组件上的信息"
    },
}
</script>

父组件的内容和上面一样

三、$refs

在父组件使用this.$refs可以获取到子组件的所有方法和数据

//子组件
<template>
    <div>
        <span>我是子组件</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    }
    
}
</script>


//父组件
<template>
    <div>
        <span>我是父组件</span>
        <v-home ref="refHome"></v-home>
    </div>
</template>

<script>
import home from '../../home'
export default {
    components:{
        'v-home':home
    },
    data(){
        return {
            data:''
        }
    },
    mounted(){
        console.log(this.$refs)  //在父组件输出,可以直接获取home组件的所有数据和方法
    }
}
</script>

运行结果

 四、$parent / $children

注：this就指向Vue实例，所以，this.$parent就是这个页面的父组件；同样的this.$children就是这个页面的子组件；

所以，如果当前在父组件，可以通过this.$children访问子组件的所有数据和方法；如果当前在子组件，可以通过this.$parent访问父组件的所有数据和方法；

如果在子组件1想访问子组件2的所有方法和数据，可以通过this.$parent.$refs也可以通过this.$parent.$children

其实还有很多方法，例如作用域插槽等。可以参考这个文章

Vue组件之间的传参方式小总结_三七安的博客-CSDN博客_vue组件间的参数传递