foreword

Make the parent component interact with the child component

1. The purpose of value passing

Make the parent component interact with the child component

2. Use steps

1. The parent component passes data to the child component

through props


<!-- 在父组件中  传值 -->

<childer-layout title="父组件传值"/>



<!-- 在子组件中 第一种方法  接收值 -->
props: ['title']


<!-- 在子组件中 第二种方法   接收值-->
props: {
  title: String //指定参数类型
}


<!-- 在子组件中 第三种方法  接收值 -->
props: {
   props: String,
   default: "默认值",//默认值
   required: true//必填
}

2. The child component passes data to the parent component

1. Through this.$emit('The name of the child component after @ in the parent component definition', value,....)

2. Through this.$parent. parent component method

<!-- 在父组件中 第一种 接收值 -->

<childer-layout  @callBack="methodCall"/>

methodCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子组件中 第一种 传值 -->

<button  @click="sendData"/>
sendData(){
this.$emit('callBack',需要传递的值1,需要传递的值2,需要传递的值3,....)
}


//------------------------ ------ -------------------------------------

<!-- 在父组件中 第二种 接收值 -->

<childer-layout/>

methodCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子组件中 第二种 传值 --> 
<button  @click="sendData"/>
sendData(){
this.$parent.methodCall( 需要传递的值1,需要传递的值2,需要传递的值3,....)
}

3. Subcomponents and subcomponents transfer data to each other

1. Pass value through props

2. The callback value can only use this.$emit (cannot use this.$parent.)

<!-- 在子组件中 引用子组件 传值-->
<childer-childer-layout title="子组件传值"/>

<!-- 在子的子组件中 第一种方法  接收值 -->
props: ['title']


<!-- 在子的子组件中 第二种方法   接收值-->
props: {
  title: String //指定参数类型
}


<!-- 在子的子组件中 第三种方法  接收值 -->
props: {
   props: String,
   default: "默认值",//默认值
   required: true//必填
}

//------------------------------------------------------------------------
<!--在子组件中 引用子组件   接收值 --> 
<childer-childer-layout  @callBack="methodChildCall"/>

methodChildCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子的子组件中  传值 --> 
<button  @click="sendData"/>
sendData(){
this.$emit('methodChildCall',需要传递的值1,需要传递的值2,需要传递的值3,....)
}

Summarize

frequently used

Pass data between Vue~ components (parent and child, child and parent, child and child)