vue学习笔记：父子组件之间的传值$refs和$parent，以及父组件给子组件传值props

比眉伴天荒 2024-04-17 18:15 54阅读 0赞

## 父组件获取子组件的值和方法 ##

父组件：

html代码

<v-header ref="headerTY"></v-header>
     <button @click="getData">父组件获取子组件的值和方法</button>

js代码：

<script>
    import Header from './header';
    export default {
      data(){
        return{
            msg:'这是一个首页组件',
            name:'首页',
            dataone:'首页第一个数据',
            title:'111'
        }
      },
      components:{
          'v-header':Header
      },
      methods:{
          getData(){
            // console.log(this.$refs.headerTY.msg)
            this.$refs.headerTY.run();
          },
          Yun(){
            alert('父组件')
          }
      }
     
     
    }
    </script>

子组件

html代码：

<template>
      <div id="app1">
        {
       {msg}}
        <button @click="getParent()">获取付父组件的值和方法</button>
       <hr>
      </div>
    </template>

js代码：

<script>
    export default {
      data(){
        return{
            msg:'这是一个头部组件',
            didi:''
        }
      },
      methods:{
        run(){
          alert(111)
        },
        getParent(){
          alert(this.$parent.name);
          
        }
      }
     
    }
    </script>

父组件通过引入子组件，并在子组件中加入属性ref="header",然后根据this.$refs.header来获取子组件的属性和方法。

## 子组件获取父组件的值和方法 ##

在子组件中直接调用this.$parent来获取父组件中的值和方法即可。

## 父组件通过props给子组件传值 ##

除此之外，父组件还可以通过props给子组件传值

父组件html代码：

<template>
      <div id="app">
       <h1>{
       {msg}}</h1>
       
       <v-header :title="name" :dataOne="dataone" :run="Ale" :home='this' ref="headerTY"></v-header>
       <hr>
       <br>
      </div>
    </template>

父组件js代码：

<script>
    import Header from './header';
    export default {
      data(){
        return{
            msg:'这是一个首页组件',
            name:'首页',
            dataone:'首页第一个数据',
            title:'111'
        }
      },
       components:{
          'v-header':Header
      },
      methods:{
          Ale(data){
            alert("这是父组件方法"+data)
          },
          Set(){
              alert(111)
          }
      }
     
     
    }
    </script>

子组件html代码：

<template>
      <div id="app1">
       <h2>{
       {msg}}--{
       {title}}--{
       {dataOne}}</h2>
       <button @click="run(111)">获取父组件方法</button><br>
       <button @click="GetData()">获取父组件实例</button>
       <br>
       <hr>
      </div>
    </template>

子组件js代码：

<script>
    export default {
      data(){
        return{
            msg:'这是一个头部组件',
            didi:''
        }
      },
      methods:{
          GetData(){
              this.home.Set();
          }
      }
     
      ,props:['title','dataOne','run','home']
    }
    </script>

这种方法是父组件通过子组件的标签声明变量属性，把父组件的值或者方法传递到子组件，除此之外也可以把父组件实例传递到子组件，如::home='this'就是。

而子组件可以根据props参数，通过传递过来的属性来获取父组件的属性值和方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习笔记：父子组件之间的传值$refs和$parent，以及父组件给子组件传值props

父组件获取子组件的值和方法父组件： html代码  <v-header ref="headerTY"><...

比眉伴天荒/ 2024年04月17日 18:15/ 0 赞/ 55 阅读

相关 vue 实现父子组件传值和子父组件传值

先上一张图，vue 父子组件传值都用的图片。从张图入手了解如何传参。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

超、凢脫俗/ 2023年02月19日 14:29/ 0 赞/ 117 阅读

相关 Vue3---父子组件传值(子组件使用 emit 传值到父组件)

Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context

た入场券/ 2022年11月05日 12:58/ 0 赞/ 232 阅读

相关 Vue 父组件给子组件传值传方法以及将整个实例传给子组件

父组件是如何给子组件传值呢？我总结了一下大体的方法，如下： 1. 父组件调用子组件的时候绑定动态属性 <v-header :title="title"></v-

柔情只为你懂/ 2022年04月23日 02:00/ 0 赞/ 211 阅读

相关 VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] Vue是一个轻量级的渐进式框架，对于它的一些特性和优点

太过爱你忘了你带给我的痛/ 2022年03月29日 19:40/ 0 赞/ 516 阅读

相关 vue 组件：父组件向子组件传值，以及子组件向父组件传值

1.父组件向子组件传值 <!DOCTYPE html> <html> <head> <meta charset='

矫情吗；*/ 2022年03月28日 04:16/ 0 赞/ 407 阅读

相关 Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值 1. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据 <script> // 创建 Vue

た入场券/ 2022年03月16日 20:16/ 0 赞/ 396 阅读

相关 vue - 父子组件之间的传值以及非父子组件之间的传值

父子组件传值在项目中非常常用的，一般遇到一样的模块，我们都会考虑做成一个公共组件，多个页面一起使用。同时，我们偶尔也会遇到非父子组件传值这种情况。下面我来介绍一下它们之间是

不念不忘少年蓝@/ 2021年09月29日 12:12/ 0 赞/ 434 阅读

相关 vue 子组件给父组件传值

Usage：子组件内容： <template> <div @click="iclick"></div> </template> m

- 日理万妓/ 2021年09月15日 07:38/ 0 赞/ 442 阅读

相关 Vue 父组件给子组件传值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue

r囧r小猫/ 2021年07月24日 13:44/ 0 赞/ 553 阅读