Vue父子组件正向传递以及反向传递参数的方法

大白菜Aaron

于 2023-04-03 01:06:08 发布

阅读量183

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_68748513/article/details/129892324

版权

第一种props

在父组件：标签中使用方法 <Header msg=" msg" ></Header> 此类表示往子组件正向传递参数“msg”，也可以用v-bind进行数据绑定进行动态传递数据（该数据是响应式的）

<Header msg="这里是向子组件传递的数据"></Header>

在子组件：里面跟data函数平级，创建一个props：【 “ msg” 】数组 j进行接收后可直接在页面中使用{{msg}}。也可以给msg进行规定传过来的数据类型。如

export dafault {//这里是子组件接收部分
    name:"",
    data(){
        return{}
    },
    props:["msg"],//如果没有太多的限制则可以直接把变量放在数组中。就可以在页面中使用了
    props:{ //这是props的对象写法
        msg:[ Number, String ], //多数据类型用数组定义
        msg:{ //写为对象模式：type为限制数据的类型，default 是默认值，requied这是设置为必传项
          type:String，
          default:()=>{//这里默认值需要用函数进行返回才能使用。否则报错
            return  "我是默认数据，不传就是默认为我"
            },
          requied:true  //这是必传的数据，跟default不能同时存在
        }
    }
}

第二种 ref 语法

在父组件中获取子组件实例后可以直接调用子组件中的方法和修改data中属性

<Header ref="header"></Header>
<!-- 在父组件中获取子组件实例 -->

<script>
    //此方法可以调用子组件方法，以及修改data 中的数据
    this.refs.header.msg="修改子组件数据"
</script>

第三种在跟组件min.js中的new Vue示例中创建data属性

在跟组件中创建data属性后即可在全局获取

new Vue({
  render: h => h(App),
  data(){
    return {
      minData:'我是全局数据'
    }
  }
}).$mount('#app')//min.js中创建data

//其他页面调用获取  
this.$root.xxx

第四种自带属性 this.$children

每个Vue实例中都一个属性 $children这个属性会包含本实例中所有的子组件以数组排列，可以通过this.$children[0].msg="xxx" 进行修改参数调用方法

我五种在原型上添加属性

Vue.prototype.xxx=xxx 在原原型上添加属性。在全局都可以获取到

子组件向父组件进行反向传参的方式

第一种自定义事件

通过在父组件定义事件通过标签传到子组件，子组件再通过props接收后就可以调用了

<!-- 这是组件中的定义函数与传递函数 -->
<Header :changeData="changeData"></Header>   
<!-- 在父组件HTML中传递一个变量，这个变量指向一个函数 -->



export default{
    name:"",
    data(){return{}},
    methods:{
        changeData(data){
          console.log(data);
            这个data是从子组件中传递过来的参数
        }
    }
}

//这里是子组件语法

erport default {
    name:"",
    data(){},
    props:["changeData"],
    nethods:{
        //触发myClick事件就可以把自定义事件触发了
        myClick(){
            this.changeData(xxx)//这里把参数传出去
        }
    }
}