Vue组件间传值的几种方式

注意：在vue里面的一些固定参数使用的时候都需要加上一个$符号

父子组件之间传值方式一：props / $emit
  • 1.props里接收父组件传递过来的数据，在父组件中使用v-bind绑定属性
    例如：
//加上单引号表示字符串
  v-bind:msg="'from parent'"  
  
  //没有v-bind就表示只是字符串
  msg = 'from parent' 
  
  //parent会被默认为变量，如果想把它变成字符串需要加上引号
  ：msg = 'parent'
  • 2.在接收传递过来的数据中，要在props中设置好相应的类型及值
props:{
    msg:{
      type:String,
      default:''
    }
  }
  • 3.子组件向父组件传值通过事件触发的形式

在子组件中绑定监听事件，例如：

<button @click='passMessage'>子组件信息</button>

然后在methods中定义：

methods:{
    passMessage(){
      this.$emit('showMessage','I am child');
  }}

然后在父组件中监听这个事件：

@showMessage='showMessage'

不需要传递参数，默认会传递参数

在父组件中定义这个事件的方法：

methods:{
    showMessage(val){
      this.msg=val;
  }}
父子组件之间传值方式二：$parent / children
  • 1.父组件想要获取子组件的数据，只需要：
this.$children.+相应的数据名称

但是需要注意，​​this.$children​​是一个数组，要找到相应组件的索引。

  • 2.子组件想要获取父组件的数据也是相同的操作
this.$parent.+相应的数据名称

但是需要注意，​​this.$parent​​是一个数组，要找到相应组件的索引。

父子组件之间传值方式三：$ref

类似于第二种方法，只是说我们相对于给了它一个命名，更容易找到。

/*在父组件中应用了子组件的地方找*/
    <child ref='Child'></child>
    
    mounted(){
        console.log('ref',this.$refs.Child)；//输出的就是相应的子组件
    }