vue 基础知识-组件调用2

作者在 2022-03-09 11:07:46 发布以下内容

在组件调用1的基础上在Buttom.vue中增加add一个函数,然后在Header中调用add


<script>
    export default{
       methods:{
          add(par){
            console.log(par);
          }
       }
    }
</script>


在Header.vue中增加


<script>

  import Button from './Buttom.vue'
   export default {
    name:"Header",
    components:{
      'myButton': Button
    },
    methods:{submit(){
        Button.methods.add("这个地方可以传参!");
     }},
    mounted(){//或者使用create(){
     //在这里可以当组件Header.vue初始化时调用Header组件中在methods中声明的函数
     this.submit();
    }
   }
<script>
注意:不建议在不同组件间修改其他组件中的属性,并且
Button.methods.add

这种跨组件调用方法的方式,无法修改被调用组件中初始化的属性,因为在调用的时候,被调用的组件的data中的初始数据不会被初始化

mounted和created两个关键字作用上是相同的,差别在于created中的逻辑是在模板渲染成html前调用;而mounted中的逻辑在模板渲染成html后调用



vue | 阅读 642 次
文章评论,共0条
游客请输入验证码