Vue动态组件传递子往父传递方法

最新推荐文章于 2024-10-10 17:12:17 发布

Lvdon9

最新推荐文章于 2024-10-10 17:12:17 发布

阅读量978

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_37995109/article/details/86634742

Vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了Vue.js中组件间的通信方式，包括父组件向子组件传递数据、子组件向父组件发送事件，以及如何使用计算属性进行数据处理。同时，探讨了模板语法、事件监听和插槽的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    <input type="text" v-model="myVal"/>
    <Coma :number='myVal' @my-event='getMyEvent'>
      <!-- 向子级插入一个标签 -->
      <p>123123</p>
      <p slot="hader">wwww</p>
      <p slot="ha">hahahaha</p>

    </Coma>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'
import Coma from './components/a'
export default {
  components:{
    Coma
  },
  data() {
    return {
      myValue:'',
       myVal:'',
    }
  },
  computed:{
    myValueWithoutNum(){
      //数字不能双向绑定 计算属性
      return this.myValue.replace(/\d/g,'');
    }
  },
  //监听val第一次 oldval第二次  //只要数据被更改
  watch:{
    myVal:function(val,oldval){
      console.log(val,oldval);
    }
  },
  methods:{
    getMyEvent(HELLO){
      console.log('i got my event'+HELLO);
    },
    //调用方法.
    getmyValueWithoutNum(){
      return this.myValue.replace(/\d/g,'');
    }
  }
};
</script>

<style>
</style>



<template>
  <div>
      {{HELLO}}
      {{number}}
      <button @click="emitMyEvent">emit</button>
      <!-- 接收父级P标签模板 -->
      <slot name="hader">NO hader</slot>
      <slot name="ha">NO HA</slot>

  </div>
  
</template>

<script>
export default {
  //父级传给子组件 支持数组和对象
  // props:['number'],
  props:{
    'number':[Number,String]
  },
  data() {
    return {
      HELLO: "我是componentA",
    }
  },
  methods:{
    //子像父传递
    emitMyEvent(){
      this.$emit('my-event',this.HELLO );
    }
  }
};
</script>

<style>
</style>