什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？

有时候我们经常分不清什么是父组件，什么又是子组件。现在来简单说下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。以上是我个人的理解含义，那么现在就直接上代码吧！

子组件：

<template><div>{{msg}}</div><p>{{hello}}</p><p>{{hellotests}}</p><button @click="btns">按钮</button>
</template>
<script>
export default{data(){return{// 子组件中声明的变量msg:'',hello:'',hellotests:''}},created(){},watch:{// 监听从父组件传过来的数据是否发生改变，然后赋值给变量CCCount() {this.msg = this.msgTestthis.hello = this.helloTest}},methods:{// 点击按钮，子组件操做父组件中的函数btns(){this.$emit('childsClick', '子组件触发父组件中的函数')},//　被父组件调用的子组件函数    msgs1(){this.hellotests = '哈哈，我是父组件调用子组件的函数'}},// 接收从父组件传过来的数据props:['msgTest', 'helloTest', 'CCCount']
}
</script>

父组件：

<template><div>test</div><p>hello world</p><span>{{btnVal}}</span><msgChildref="msgRef"@childsClick="btnClick":msgTest='msgTest2':helloTest='helloTest2':CCCount='CCCount'></msgChild>
</template>
<script>// 引入子组件　import msgChild from './test.vue'export default{data(){return{msgTest2:'',helloTest2:'',CCCount:0,btnVal:''}},components:{// 声明子组件名字  msgChild},created(){this.msgs()},methods:{msgs(){// 给子组件变量赋值this.msgTest2 = '测试1'this.helloTest2 = '测试2'},btnClick(val) {this.CCCount++this.btnVal = val// 触发子组件中的函数    this.$refs.msgRef.msgs1()}}}
</script>

从父组件代码可知，test.vue是子组件，并且在父组件中被命名成 msgChild ,我们在父组件中放置子组件的位置直接写子组件的名字即可，这样就是相当于放置了整个子组件。

先说父组件是怎么传值给子组件的：我们从父组件可知有这些变量，

:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'

例如：msgTest就是子组件接收的变量（无需再在子组件中声明），需要在子组件中的props中接收（　props:['msgTest', 'helloTest', 'CCCount']　）。msgTest2是父组件的变量，需要在父组件中声明。我只需要在父组件中给msgTest2赋值即可，子组件中的this.msgTest便能接收到。

那么子组件是怎么向父组件中传值的呢？是通过触发父组件中的函数，并传递一个参数来完成传值的，例如：

this.$emit('childsClick', '子组件触发父组件中的函数')

触发父组件中的@childsClick="btnClick"来调用btnClick方法，并向btnClick方法传参 '子组件触发父组件中的函数' ，　通过触发方法来向父组件传值。

父组件又是如触发子组件中的函数呢？答案是通过父组件中的 ref 来触发的，父组件中的　this.$refs.msgRef.msgs1()　便是触发子组件中的msgs1()函数。

什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？相关推荐

Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
vue 父组建获取子组建方法为获得_Vue父子组件状态同步的最佳方式
平时我们在使用Vue开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一 ...
[vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
如何在vue 中使用组件，以及组件通信的方式（父传子/子传父/兄弟传）
文章目录前言零.如何使用封装组件一.为什么需要下面的通信方式二.父组件给子组件通信三.子组件给父组件通信四.兄弟组件通信五.多层组件之间的通信总结前言组件可以说是 vue 中最为核 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...

什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？

什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？相关推荐

最新文章

热门文章