子组件父组件传值的三种方式

浅浅的花香味﹌ 2024-04-17 13:56 70阅读 0赞

### **方法一：使用prop和emit。** ###

父页面

> <template>  
>     <div>  
>         <child  :valueC="value1"  @getChidC="getChid"></child>   //等号右边代表当前页面要传到子页面的值。子页面用左边的变量接收。@代表函数，左边是子页面emit要用的，右边是当前页接收的子。右当前左子页面  
>         <button @click="changeA">点击获取子组件值</button>  
>     </div>  
> </template>  
> <script>  
>     export default\{  
>          components: \{   
>                child: resolve => \{  
>                     require(\['@/components/child'\], resolve)  
>                 \},  
>         \},  
>         data()\{  
>             return \{  
>                 value1:'',      
>             \}  
>         \},  
>         methods:\{  
>             getChid(e)\{  
>                 console.log(e)  
>             \},  
>     \}  
> </script>

子页面child.vue

> <template>  
>   <div class="children">  
>       父组件的值value1：\{ \{value1\}\}  
>      <input type="text" v-model="inputValue">  
>      <button @click="sendToP">点击传值给父组件</button>  
>   </div>  
> </template>  
> <script>  
>     export default\{  
>         props:\['valueC'\],  
>         data()\{  
>             return\{  
>                 inputValue:'',  
>             \}  
>         \},  
>         methods:\{  
>             sendToP()\{  
>                 this.$emit("getChidC",this.inputValue)  
>             \}  
>         \},  
>     \}  
> </script>

### **方法2.使用$parent 和$children。`$children` 的值是数组，而`$parent`是个对象** ###

在子页面使用this.$parent能获取父组件里面的变量和函数

在父页面使用this.$children获取所有的子组件的数组形式。然后根据下标可以获取具体子页面的变量和函数.this.$children\[0\].messageA

父组件

> <template>  
>     <div>  
>         <child :value1="value1"  @getChid="getChid"></child>  
>         <button @click="changeA">点击获取子组件值</button>  
>     </div>  
> </template>  
> <script>  
>     export default\{  
>          components: \{   
>                child: resolve => \{  
>                     require(\['@/components/child'\], resolve)  
>                 \},  
>         \},  
>         data()\{  
>             return \{  
>                 value1:'123',      
>             \}  
>         \},  
>         methods:\{  
>             getChid(e)\{  
>                 console.log(e)  
>             \},  
>             changeA()\{  
>                 console.log(this.$children\[0\].parentVal);  
>                  this.$children\[0\].parentVal ='this is new value';  
>                 console.log(this.$children\[0\].parentVal)  
>             \}  
>         \},  
>     \}  
> </script>

子组件

> <template>  
>   <div class="children">  
>       父组件的值value1：\{ \{parentVal\}\}  
>   </div>  
> </template>  
> <script>  
>     export default\{
> 
>         data()\{  
>             return\{  
>                 parentVal:'',  
>             \}  
>         \},  
>         mounted()\{  
>             this.parentVal=this.$parent.value1  
>         \},  
>     \}  
> </script>

### ** 方法3：`ref` / `refs`** ###

`子组件ref="child".父组件中使用refs获取子组件的内容。`

父组件

> <template>  
>     <div>  
>         <child :value1="value1"  @getChid="getChid" ref="child"></child>  
>         <button @click="changeA">点击获取子组件值</button>  
>     </div>  
> </template>  
> <script>  
>     export default\{  
>          components: \{   
>                child: resolve => \{  
>                     require(\['@/components/child'\], resolve)  
>                 \},  
>         \},  
>         data()\{  
>             return \{  
>                 value1:'123',      
>             \}  
>         \},  
>         methods:\{  
>             getChid(e)\{  
>                 console.log(e)  
>             \},  
>             changeA()\{                  
>                 console.log(this.$refs.child.parentVal);  
>                   
>             \}  
>         \},  
>     \}  
> </script>