vue直接在父组件中调用子组件的方法

Posted 2023-04-14

参考技术A 方法一：

//父组件中   

引入子组件  然后点击调用子组件方法

<template>

  <div class="container">

    <h1 @click="handleClick" style="text-align: center">Musxc</h1>

    <LineChart ref="child" ></LineChart>

  </div>

</template>

<script>

import LineChart from "../components/LineChart.vue";

export default 

  components: 

    LineChart,

  ,

  methods: 

        handleClick() 

              this.$refs.child.sing();

        ,

  ,

;

</script>

//子组件中 

我是子组件

export default

  methods:

    sing()

      console.log('我是子组件的方法');

    ,

  ,

;

成功的调用了子组件的方法

方法二：通过组件的$emit、$on方法；

//父组件中   

        点击调用子组件方法           

    import Child from './child';

export default    methods:         handleClick()               this.$refs.child.$emit("childmethod")    //子组件$on中的名字        ,

    ,

//子组件中   

我是子组件

export default

    mounted()

        this.$nextTick(function()

            this.$on('childmethods',function()

                console.log('我是子组件方法');

            );

        );

    ,

;

vue解决父组件调用子组件只执行一次问题

参考技术A 在父组件中引用的子组件标签上添加属性，来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点，如果我们这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行)，导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。但是有时候我们需要这个组件每次都重新生成dom 元素，每次都执行created() 函数。这时候就用到了vue中的key 属性。