Vue 3 父组件 setup 中执行子组件方法

作者: ygqygq2 分类: 开发发布时间: 2022-08-14 20:49

Vue 3 父组件调用子组件方法，可以在生命周期函数中直接调用：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>父组件调用子组件方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
</head>
<div id="root"></div>

<body>

</body>
<script>
  const app = Vue.createApp({
    template: `
    <div>
    父页面
      <child ref="sonRef"/>
      <button @click="handleClick">test</button>
    </div>
  `,
    setup() {
      const { ref, onMounted } = Vue;
      const sonRef = ref();

      const handleClick = () => {
        sonRef.value.song();
      }

      onMounted(() => {
        console.log('这里执行子组件方法', sonRef.value.song());
      });

      return { sonRef, handleClick }
    }
  });

  app.component('child', {
    template: `
      <div>
        子页面
      </div>
    `,
    setup() {
      const song = () => alert('hello world');

      return {
        song,
      }

    }
  });
  app.mount('#root');
</script>

</html>

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">

<title>父组件调用子组件方法</title>

</head>

<body>

</body>

const app = Vue.createApp({

template: `

<div>

父页面

</div>

setup() {

const { ref, onMounted } = Vue;

const sonRef = ref();

const handleClick = () => {

sonRef.value.song();

}

onMounted(() => {

console.log('这里执行子组件方法', sonRef.value.song());

});

return { sonRef, handleClick }

}

});

app.component('child', {

template: `

<div>

子页面

</div>

setup() {

const song = () => alert('hello world');

return {

song,

}

});

app.mount('#root');

</script>

</html>

微信扫描下方的二维码阅读本文

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

一条评论

添加新评论

Chinge_Yang

2022年8月19日 18:03

回复TA

收藏的代码段多了，自然就成大神了

发表回复取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

Vue 3 父组件 setup 中执行子组件方法

发表回复 取消回复

发表回复取消回复