Vue中父子组件间通信的方法是什么

发布时间:2022-11-09 09:09:46 作者:iii
来源:亿速云 阅读:141

这篇文章主要讲解了“Vue中父子组件间通信的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中父子组件间通信的方法是什么”吧!

1、父组件传递给子组件


这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信

通过props来完成组件之间的通信

Vue中父子组件间通信的方法是什么
Vue中父子组件间通信的方法是什么

2、浅谈Props

那么什么是Props呢?

在使用 script setup的单文件组件中,props 可以使用 defineProps() 宏来声明:

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

1)数组类型

在没有使用 script setup 的组件中,prop 可以使用 props 选项来声明:

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

例子,对象语法的使用

<template>
	<show-info name="kk" age="18" height="1.7"  />
</template>
 export default {
        props:{
            name :{
                type:String,
                default:"我是默认值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

另外:
那么type的类型都可以是哪些呢?

2)对象类型

对象的形式声明props(这个还挺常用的)

使用 script setup

defineProps({
  title: String,
  likes: Number
})

script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

3、子组件传递给父组件

子组件传递给父组件通过$emit触发事件

Vue中父子组件间通信的方法是什么

子组件传递内容到父组件:

$emit(“add”, count)
第一个参数自定义的事件名称,第二个参数是传递的参数

举一个计数器案例

1)父组件App.vue

<template>
    <div class="app">
    <h3>当前计数:{{counter}}</h3>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter @add="addBtnClick"></add-counter>  
   <!-- 2.自定义su-counter组件,监听内部的sub事件 -->
   <sub-counter @sub="subBtnClick"></sub-counter>
   </div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

2)子组件1AddCounter.vue

这里定义的是计数器的加操作
子组件事件触发之后,通过this.$emit的方式进行发出事件

<template>
    <div class="add">
        <button @click="btnClick(1)">+1</button>
        <button @click="btnClick(5)">+5</button>
        <button @click="btnClick(10)">+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称,第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

3)子组件2SubCounter.vue

这里定义的是计数器的减操作

子组件事件触发之后,通过this.$emit的方式进行发出事件

<template>
    <div class="sub">
        <button @click="btnClick(1)">-1</button>
        <button @click="btnClick(5)">-5</button>
        <button @click="btnClick(10)">-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits数组语法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

感谢各位的阅读,以上就是“Vue中父子组件间通信的方法是什么”的内容了,经过本文的学习后,相信大家对Vue中父子组件间通信的方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. Vue父子组件通信
  2. Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue-cli中stylus无法使用如何解决

下一篇:怎么使用vue实现锚点定位功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》