子组件

Vue3父组件调用子组件的方法-子组件向父组件传值

千次阅读

2022-04-16 14:34:33

setup写法

// 父组件
<template>
  <div>
    <h2>我是父组件!</h2>
    <button @click="handleClick">调用子组件的方法</button>
    <Child ref="child" @childClick="childClick"/>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'
 
export default defineComponent({
  components: {
      Child
  },
  setup() {
  	// 获取子组件
  	const child = ref(null)
 	const handleClick = ()=>{
 		// 调用子组件的方法
 		child.value.childMethod()
 	}
 	const childClick = (e)=>{
		console.log('子组件传递的方法')
	}
    return {
      child,
      handleClick
    }
  }
});
</script>

// 子组件
<template>
  <div>
    <h2>我是子组件!</h2>
  </div>
</template>

import { defineComponent, ref } from 'vue'
 
export default defineComponent({
  emits: [
    'child-click'
  ],
  props: {
    msg: String
  },
  setup(props, context) {
  	// 向父组件传事件
    const handleClick = () => {
      context.emit('child-click', context)
    }
	// 父组件调用子组件的事件
	const childMethod = () =>{
		console.log("子组件的事件被触发了")
	}
 
    return {
      props,
      handleClick,
      childMethod
    }
  },
})

＜script setup＞语法糖写法

// 父组件
<template>
	<button @click="fun">调用子组件的方法</button>
	<child ref="childRef"></child>
</template>
<script setup>
import { ref } from "vue";
// 引入子组件
import child from "./child.vue";
// 获取子组件
const childRef = ref(null);
const fun = () => {
	childRef.value.childFun();// 调用子组件的方法
}
</script >


// 子组件
<script setup>
import { defineExpose } from 'vue'
const childFun = () => {
	console.log('我是子组件方法')
}
// **重点！！这里需要使用defineExpose暴露出去**
defineExpose({
	childFun
})
</script>

前端 vue.js javascript

更多相关内容

Vue 父组件通过 prop 传值给子组件但子组件获取的值为空-解决记录

千次阅读 2021-12-05 21:21:33

开发中遇到需要父组件向子组件传值的情景，笔者使用 Vue 官方文档提供的通过 Prop 向子组件传递数据的方法实现父组件向子组件的传值。但是在我的实例中，使用该方法传值，最终子组件获取到的数据为空值。为了找到...

01 Bug 描述

笔者基于简化版的 vue-element-admin 前端框架 vue-admin-template 进行二次开发。

开发中遇到需要父组件向子组件传值的情景，笔者使用 Vue 官方文档提供的通过 Prop 向子组件传递数据的方法实现父组件向子组件的传值。但是在我的实例中，使用该方法传值，最终子组件获取到的数据为空值。

为了找到 Bug，我回顾了一遍通过 Prop 向子组件传递数据的过程。

02 通过 Prop 向子组件传递数据

笔者使用该方法实现父组件向子组件传值的过程如下：

父组件中操作：

在模板定义中父组件将自己要传递的数据，传递给子组件
子组件通过绑定属性来绑定父组件所传递的数据

子组件中操作：

子组件中将上面用于绑定数据的标签属性经过驼峰转换之后，定义到对应子组件模型属性定义的 props 中
子组件的标签属性可以使用插值表达式，显示在template模板里面

我的实例中父组件主要代码如下：

父组件在创建时调用 fetchData() 从后台获取一个集合数据并保存在 list 数据属性中，然后在模板定义中将 list 数据传递给子组件 ChildComponent

<template>
  <div class="app-container">    
  	   <!-- 父组件将 list 数据传递给子组件 -->
  	   <!-- 子组件通过绑定属性 child-list 绑定父组件数据 list -->
       <child-component :child-list="list"/>
  </div>
</template>

<script>
// 引入子组件 ChildComponent
import ChildComponent from './components/ChildComponent'
import { transactionList } from '@/api/remote-search'

export default {
  name: 'FatherComponent',
  components: {
    ChildComponent
  },
  data() {
    return{
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '+id'
      }
    } 
  },
  created() {
  	// 创建时获取数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 通过 api 方法 transactionList() 使用封装的 axios 请求从后台获取数据 
      transactionList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
      })
    }
  }
}
</script>

我的实例中子组件主要代码如下：

子组件中将上面用于绑定数据的child-list经过驼峰转换之后childList，定义到对应子组件模型属性定义 props:["childList"]，然后使用该数据计算集合元素总数num，最大值max，最小值min和平均值avg，并将这些计算结果使用插值表达式，显示在template模板中

<template>
<el-row>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
      <div class="card-panel-text">
      <!-- 使用插值表达式显示数据处理结果 -->
      总数：{{num}}
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
      <div class="card-panel-text">
      最大值：{{max}}
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
      <div class="card-panel-text">
      最小值：{{min}}
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
      <div class="card-panel-text">
      平均值：{{avg}}
      </div>
    </el-col>
  </el-row>
</el-row>
</template>

<script>

export default {
  // 使用 prop 获取父组件传递过来的数据
  props:["childList"],
  data(){
    return{
      list: this.childList,
      num: 0,
      max: 0,
      min: 100,
      avg: 0,
    }
  },
  created(){
  	// 创建组件时调用该方法处理数据
    this.analysis()
  },
  methods: {
    analysis() {
      this.num = this.list.length
      let sum = 0
      for(let elem of this.list){
        if(elem.score > this.max){
          this.max = elem.score
        }
        if(elem.score < this.min){
          this.min = elem.score;
        }
        sum += elem.score;
      }
      this.avg = parseInt(sum/this.num)
    }
  }
}
</script>

03 发现 Bug

笔者的项目中是使用 axios 来请求后端数据的，这是父组件通过 prop 传值给子组件，子组件获取的值为空的Bug所在。

3.1 Axios 的异步请求机制

Axios 是一个异步请求技术 axios 中文网，往往基于 XMLHttpRequest 对象发起的请求都是异步请求。

异步请求的特点就是请求之后页面不动，响应回来的更新只是页面的局部，多个请求之间互不影响，并行执行。

3.2 Vue 的生命周期

Vue 实例的生命周期大概分为以下的几个阶段：

create实例创建阶段：钩子函数为 beforeCreate、created
compile模板编译阶段：该阶段无生命周期钩子函数
mount视图挂载阶段：钩子函数为 beforeMount、mounted
update更新阶段：钩子函数为 beforeUpdate、updated
destroy实例销毁阶段：钩子函数为 beforeDestroy、destroy

3.3 异步请求带来的问题

我们看根据 Vue 的生命周期来看父组件的实例化过程，第一步就是创建阶段，而在创建阶段中就已经调用了 fetchData() 向后端请求数据。

所以代码层面，我们是在子组件完成编译之前就已经请求了数据，理论上子组件获取到的 list 不该为空。

这就是 axios 异步请求提高了请求效率之外，带来了一些问题：异步请求之后页面不动，响应回来的更新只是页面的局部，多个请求之间互不影响，并行执行。

父组件通过 props 向子组件传递异步数据时，再父实例完成模板编译之后，异步数据数据还未到达，这时子组件获取到的数据就为空。

04 解决 Bug

我们已经发现子组件通过 prop 获取数据为空的问题是 axios 异步请求机制导致的，解决思路有两种：

数据到达后再传递：即等父组件确认从后端获取到数据之后再通过 prop 传递给子组件
监听父组件改变的 prop：在子组件中定义 watch 属性监听父组件通过 prop 传递数据的变化情况

4.1 数据到达后再传递

这种解决方式比较符合笔者项目的场景，也有两种方式：一种是使用 v-if 条件渲染；另一种是将异步请求使用 Promise 转化为同步请求获取后端数据。

这里仅介绍更为简单易用的 v-if 条件渲染方式：在子组件标签中增加 v-if="list != null" 判断要传递的数据是否为空，不为空时才渲染。

v-if 条件渲染会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性渲染：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

笔者的项目中只需要实例创建时传递一次数据，所以 v-if 的惰性十分契合项目需求。修改父组件代码如下，在代码第4行添加v-if即可：

<template>
  <div class="app-container">    
  	   <!-- 父组件中增加 `v-if="list != null"` 判断要传递的数据是否为空，不为空时才渲染 -->
       <child-component v-if="list!=null" :child-list="list"/>
  </div>
</template>

<script>
// 引入子组件 ChildComponent
import ChildComponent from './components/ChildComponent'
import { transactionList } from '@/api/remote-search'

export default {
  name: 'FatherComponent',
  components: {
    ChildComponent
  },
  data() {
    return{
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '+id'
      }
    } 
  },
  created() {
  	// 创建时获取数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 通过 api 方法 transactionList() 使用封装的 axios 请求从后台获取数据 
      transactionList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
      })
    }
  }
}
</script>

4.2 监听父组件改变的 prop

除了上述较为简单的方法，如果你的项目中父组件向子组件传递的数据会频繁动态改变，使用监听的方式可能更加适合你需要的应用场景。

在子组件中使用 watch 来监听父组件改变的prop，使用methods 来代替 created，本项目的代码不适用这种情况，使用如下子组件实例代码：

<template>
 <div>
  子组件<!--1-->
  <p>{{test}}</p>
 </div>
</template>
 
<script>
 export default {
  props: ['childObject'],
  data: () => ({
   test: ''
  }),
  watch: {
   'childObject.items': function (n, o) {
    this.test = n[0]
    this.updata()
   }
  },
  methods: {
   updata () { // created只会执行一次，但是又想监听改变的值做其他事情，就要使用methods 来代替 created
    console.log(this.test)
   }
  }
 }
</script>

05 解决后记 - 父组件和子组件互相传值

Bug 解决过程主要是父组件通过 prop 传值给子组件的过程，这里也记录一下子组件向父组件传值的方法，主要使用 $emit() 方法让父组件监听到自定义事件实现传值。

一个子组件和父组件互相传值简单例子如下：

子组件代码：

<template>
    <div>
        <h1>接收到了来自父组件的数据：{{toChildData}}</h1>
        <button @click="toParent">向父组件传值</button>
    </div>
</template>
 
 
<script>
export default {
	// 接收来自父组件的数据
	props:['toChildData'],
    data() {
        return {
            childData: '子组件的数据'
        }
    },
    methods: {
        toParent:function() {
        	// 触发当前实例上的事件，向父组件发送数据
        	// 注意事件名为 listenEvent，父组件根据此名来监听事件
            this.$emit('listenEvent', this.data)
        }
    }
}
</script>

父组件代码：


<template>
    <div>
        <h1>接收到了来自子组件的数据：{{fromChildData}}</h1>
        // @listenEvent="receiveData" 监听子组件的 listenEvent，并调用 receiveData() 接收来子组件的数据
        <child :to-child-data="fatherData" @listenEvent="receiveData"></child>
    </div>
</template>
 
 
<script>
import childComponent from './components/childComponent'
export default {
	components: {childComponent},
    data() {
        return {
            fatherData: '这是父组件的数据',
            fromChildData: null
        }
    },
    methods: {
        receiveData(data) {
            this.fromChildData = data.childData;
        }
    }
    
}
</script>

参考资料

通过 Prop 向子组件传递数据

详解vue父组件传递props异步数据到子组件的问题

vue条件语句v-if、v-else、v-else-if用法

收起

展开全文

vue.js javascript 前端框架

React子组件给父组件传值，父组件引用子组件并给子组件传值
千次阅读 2019-11-27 18:28:37
本博客代码是 React 父组件和子组件相互传值的 demo；实现封装一个折线图，折线图选择下拉框，获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图；效果图如下：父组件代码：代码解析：父组件 ...
本博客代码是 React 父组件和子组件相互传值的 demo；实现封装一个折线图，折线图选择下拉框，获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图；效果图如下：

父组件代码：

代码解析：父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件，并且接收子组件传递给父组件的 storeId ;
```
import React, { Component } from 'react';
import Sub from './components/Sub';

class Parent extends Component {
  state = {
    list:[{'storeId':1,'name':'li'},{'storeId':2,'name':'jay'}],
  };

  storeId=(value)=> {
    console.log('子组件传递给父组件的值',value)
  }
  render() {
    return (
      <div>
        {this.state.list?
        (
        <Sub 
            storeId={this.storeId} 
            list={this.state.list} 
        />
        ):null}
      </div>
    );
  }
}

export default Parent;
```
收起
展开全文

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

万次阅读 2019-02-24 21:58:11

父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 &lt;script&gt; // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { ...

父组件向子组件传值

组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

使用v-bind或简化指令，将数据传递到子组件中：

<div id="app">
    <son :finfo="msg"></son>
  </div>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      methods: {},

      components: {
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com1: {
          data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
            // data 上的数据，都是可读可写的；
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
          // props 中的数据，都是只读的，无法重新赋值
          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

子组件向父组件传值

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

<son @func="getMsg"></son>

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>

    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>这是 子组件</h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

评论列表案例

目标：主要练习父子组件之间传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">


    <cmt-box @func="loadComments"></cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

收起

展开全文

Vue关于父组件更新子组件子组件不重新渲染最新数据的问题
千次阅读 2021-10-27 12:08:20

父组件更新，子组件一定会重新渲染，但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数，data不会重新执行，如果刚开始第一次渲染的时候，把属性都挂载到当前组件的data中，只有第一次渲染子组件才会...

收起

vue.js javascript 前端
Vue +父组件调用子组件方法 + 子组件回调父组件方法
千次阅读 2021-09-07 22:14:33

【父组件】： <template> <div> <span style="color: red">-------------------------------------------</span><br> <span style="color: red">这是父组件页面</span&...

收起

javascript vue.js html ref emit
Vue中父组件以及子组件传值问题
万次阅读 2021-11-24 17:19:15

父组件向子组件传值会用到：Prop，一般的我们需要在子组件中进行相关的声明，如下所示： 子组件为HellowWorld.vue <script> export default { name: 'HelloWorld', //接收的变量 props: { //声明相关的

收起

vue
React 父组件调用子组件中的方法
千次阅读 2021-08-05 21:08:18

???? Parent.js import React, { Component } from 'react'; import Child from './Child'; ...class Parent extends Component { componentDidMount () { ... // 将子组件的实例存到 this.childRef 中, 这样整个父组件

收起

react
【Vue3系列】父组件调用子组件的方法-子组件向父组件传值
千次阅读 2021-12-23 11:22:46

一：父组件调用子组件的方法父组件 <template> <div> 　父页面 <son-com ref="sonRef"/> <button @click="handleClick">test</button> </div> </template> <...

收起

javascript vue.js typescript vue3 前端
vue组件实现父组件向子组件传值、子组件用父组件的方法、父组件用到子组件数据及方法
万次阅读 2019-10-09 15:18:09

父组件可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要的传递的值传递给子组件内部，供子组件使用注意：v-bind：绑定名（随便取，但是要跟子组件里的props里的声明保持一致，） props中的数据是...

收起
vue中父组件传值给子组件，父组件值改变，子组件重新渲染
千次阅读 2022-04-02 09:51:21

cityComponents是子组件，cityId是父组件传给子组件的值，getData是子组件的渲染数据方法一：在父组件中用ref=“com” 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染...

收起

vue
vue3.0 子组件调用父组件中的方法
千次阅读 2021-07-31 17:45:17

在vue2中，子组件调用父组件，直接使用this.$emit()即可。但是在vue3中，很显然使用this.$emit() 已经开始报错了，为什么会报错呢？原因是：在vue3中setup是在声明周期beforeCreate和created前执行，此时vue对象还...

收起

vue3
React子组件给父组件传值
千次阅读 2022-04-25 10:16:13

React子组件给父组件传值

收起

前端 react
小程序父组件修改子组件数据或者父组件调用子组件方法的方式
千次阅读 2021-01-27 19:06:02

1.直接修改子组件数据达到想要的效果首先parents是父组件 child是子组件 父组件wxml中引用子组件child class为child-current 子组件中当前数值num 默认为0 子组件wxml页面 子组件js页面父组件中js...

收起
VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值
千次阅读 2022-04-17 14:24:43

一）子组件修改父组件传来的值：父组件传递给我一个名为deptName数据，但是现在我要在子组件中修改它的值并且实时更新页面，直接this.deptName是不能直接修改他的值的，所以我采用了使用一个中间变量来接受的方式...

收起

vue uniapp
Vue.js 之组件-监听子组件事件
千次阅读 2021-05-16 01:45:01

1、监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据，反过来，子组件如何向父组件通信呢？在 Vue.js 中，这是通过自定义事件来实现的，子组件使用 $emit() 方法触发事件，父组件使用 v-on 指令监听...

收起

vue.js
VUE3模板ref引用子组件或者子组件的方法
千次阅读 2021-08-26 21:42:41

通过ref()函数还可以引用页面上的元素或组件使用步骤： 1、在setup()中创建一个ref对象并返回它 2、在页面上为元素添加ref属性，并设置属性值与创建的ref对象的名称相同 3、当页面渲染完成后，可以通过该ref独享...

收起

vue.js
React 父组件给子组件传值，子组件接收
千次阅读 2019-11-27 16:38:42

父组件传值代码： render() { return ( <div> {this.state.list?(<GeomLine list={this.state.list}/>):null} </div>...子组件接收代码： class GeomLine extends Compon...

收起
如何实现子组件向父组件传值
千次阅读 2021-04-20 09:25:54

自定义组件也叫子组件，因为它不能独立存在，需要被引入到页面上才能生效。子组件避免一个页面的布局庞大、臃肿，而且使代码可读性好、易维护。 子组件如何向父组件传值呢？比如当子组件对数据进行改造后，如何把...

收起

android
React子组件如何传值给父组件?这样传
千次阅读 2021-07-27 21:51:20

父组件传值到子组件 先来温习一下在React中父组件如何传值给子组件: 利用props可直接实现由父组件传值给子组件 父组件中代码: ReactDOM.render( <App text="hello world"></App>, document....

收起

react javascript
子组件调用父组件的方法
千次阅读 2021-12-28 14:31:17

方法一：子组件$emit触发父组件事件 @click= "triggerBrotherMethods" triggerBrotherMethods() { this.$emit( 'clickBrotherBtn') }, <template> <div> <son @clickBrotherBtn= ...

收起

javascript 前端 typescript
vue中，父组件主动获取子组件中的数据和方法及子组件主动获取父组件中的数据和方法
千次阅读 2021-01-21 20:41:15

1.父组件主动获取子组件中的数据和方法在父组件里面通过: this.$refs.childMethod.属性 this.$refs.childMethod.方法在父组件中：(调用子组件的时候，定义一个ref) <child-list ref="childMethod" :...

收起

vue
vue 父传子，子传父组件的多种方式；父组件直接调用子组件方法；子组件直接调用父组件方法
千次阅读 2021-08-19 14:53:24

//父组件： <user-view ref="view" :dialog-visible="userViewVisible" @close="viewClose" /> methods:{ view(row) { this.$refs.view.setUser(row);...// 子组件：user-view methods:{ setUse.

收起

vue 传参 refs
vue 点击父组件，刷新子组件
千次阅读 2022-03-26 13:26:05

最近用了父子组件，在子组件发送请求，只是首次发送，关闭子组件，再次打开，就不请求了，百度了一下，找到了方法，这里记录一下。 <template> <div class="pageContainer"> <el-button type=...

收起

vue
子组件向父组件传值
千次阅读 2021-05-20 08:32:47

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。 // 子组件 &...

收起

vue
Vue父组件监听子组件的方法并接收子组件的传值
千次阅读 2019-11-13 16:35:06

子组件是一个字典表的下拉选择器，父组件需要根据子组件选择的不同内容展示不同的效果 1.2 需求分析父组件需要去监听子组件的事件，并接收子组件的传值。 2.解决方法 2.1 子组件的代码 template模板代码 <...

收起

$emit
Vue 子组件修改父组件值的解决方法
千次阅读 2020-10-21 22:51:30

vue中父组件向子组件传值时，其父子prop之间形成单向下行绑定，反过来则不行，这样可以防止子组件意外改变父组件的值，怕子组件污染父组件，造成不可控；此外，每次父组件的数据发生更新时，子组件的值都会更新到...

收起

vue
vue 父组件中调用子组件函数的方法
千次阅读 2020-12-22 13:25:14

vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法：1.给子组件定义一个ref属性。eg:ref="childItem"2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}2. 在父组件的...

收起
vue3父组件传值给子组件,子组件无法实时更新父组件传递值
千次阅读 2021-11-21 18:06:20

操作父组件修改每个子组件的数据,没能实时更新子组件 1.未解决前的写法父组件中 <template> <div class="process-parent"> <div class="process-style" v-for="(item, index) in data" :key=...

收起

vue
vue获取子组件高度
千次阅读 2020-01-09 16:57:01

vue获取子组件高度 this.loopHeight = this.$refs["vueHeader"].$refs["getHeader"].offsetHeight 同理也可以获得子组件的数据和方法。需求描述就是官网的一个二级页内（锚点）导航，位置在轮播图下方。 ...

收起

vue

Vue 父组件通过 prop 传值给子组件 但子组件获取的值为空-解决记录

01 Bug 描述

02 通过 Prop 向子组件传递数据

03 发现 Bug

3.1 Axios 的异步请求机制

3.2 Vue 的生命周期

3.3 异步请求带来的问题

04 解决 Bug

4.1 数据到达后再传递

4.2 监听父组件改变的 prop

05 解决后记 - 父组件和子组件互相传值

参考资料

React子组件给父组件传值， 父组件引用子组件并给子组件传值

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

父组件向子组件传值

子组件向父组件传值

评论列表案例

Vue关于父组件更新子组件子组件不重新渲染最新数据的问题

Vue +父组件调用子组件方法 + 子组件回调父组件方法

Vue中父组件以及子组件传值问题

React 父组件调用子组件中的方法

【Vue3系列】 父组件调用子组件的方法-子组件向父组件传值

vue组件实现父组件向子组件传值、子组件用父组件的方法、父组件用到子组件数据及方法

vue中父组件传值给子组件，父组件值改变，子组件重新渲染

vue3.0 子组件调用父组件中的方法

React子组件给父组件传值

小程序父组件修改子组件数据或者父组件调用子组件方法的方式

VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值

Vue.js 之 组件-监听子组件事件

VUE3模板ref引用子组件或者子组件的方法

React 父组件给子组件传值，子组件接收

如何实现子组件向父组件传值

React子组件如何传值给父组件?这样传

子组件调用父组件的方法

vue中，父组件主动获取子组件中的数据和方法及子组件主动获取父组件中的数据和方法

vue 父传子，子传父组件的多种方式；父组件直接调用子组件方法；子组件直接调用父组件方法

vue 点击父组件，刷新子组件

子组件向父组件传值

Vue父组件监听子组件的方法并接收子组件的传值

Vue 子组件修改父组件值的解决方法

vue 父组件中调用子组件函数的方法

vue3父组件传值给子组件,子组件无法实时更新父组件传递值

vue获取子组件高度

Vue 父组件通过 prop 传值给子组件但子组件获取的值为空-解决记录

React子组件给父组件传值，父组件引用子组件并给子组件传值

【Vue3系列】父组件调用子组件的方法-子组件向父组件传值

Vue.js 之组件-监听子组件事件