理解vue中的父组件，子组件

比如说要实现一个饼状图，

我们需要完成的工作是：

1.子组件负责饼状图所有功能的实现

2.父组件负责使用这个功能就可以了

可以看出，这个饼状图的实现主要是在子组件中，那我们先从子组件说起:

子组件的工作：

完成饼状图的布局，实现饼状图该有的功能，就相当于一个被封装好的函数，什么都有了，就差给它传入实参调用就可以了

props方法拿到父组件给的数据，并用这些数据真正的实现某些功能（拿到了实参，并使用实参）

<template><div></div>
<template>
<script>
export default {
// 使用props方法从父组件拿到数据
　　props: {childNeed: {type: String,dafault: '父组件未传数据时的默认值'}}data() {return {realData: '子组件在自己页面要使用的数据'}},created() {// 页面刚加载进来时，将从父组件拿到的数据赋给子组件中自己定义的数据，避免从父组件直接拿到数据后子组件进行操作导致出错this.realData = thia.childNeedconsole.log(this.realData， '子组件可真正用于页面操作的数据')}
}
</script>

父组件的工作：

调用这个子组件，并将子组件所用的数据传给它，就相当于调用了封装好的函数，并且给它传入了实参，这样这个组件就可以被展示在页面上了

调用子组件，并传递数据给子组件（调用封装好的函数，并将实参传入）

<template> <child :childNeed='parentGive'></child><template><script>// 引入子组件import child from './child.vue'export default {　　components: {child},　　data() {　　return {　　parentGive: '父组件将要传给子组件的数据'}}}</script>

上述这样就使用props方法成功将父组件给予的数据传递给了子组件，子组件就可以使用这些数据了。

但是还有另一种情况就是父组件把数据给予了子组件，但是子组件不仅使用了这些数据，并且在某种情况下改变了这些数据，它就需要告诉父组件，我改变了你给我的这些数据，你在页面上不能显示原来的，得显示我改变后的这些新数据，这种情况下该怎么办呢？

使用什么方法把子组件这些新的数据告知父组件呢？这里就介绍下emit()方法的使用：

<template><div></div>
<template>
<script>
export default {
// 使用props方法从父组件拿到数据
　　props: {childNeed: {type: String,dafault: '父组件未传数据时的默认值'}}data() {return {realData: '子组件在自己页面要使用的数据'}},created() {// 页面刚加载进来时，将从父组件拿到的数据赋给子组件中自己定义的数据，避免从父组件直接拿到数据后子组件进行操作导致出错this.realData = thia.childNeedconsole.log(this.realData， '子组件可真正用于页面操作的数据')　　this.realData = '11111' // 子组件拿到了真正的数据并改变了这个数据   // 使用emit方法将改变后的数据再传递给父组件，父组件在页面上更新数据　　this.$emit('noticParent', { noticData: this.realData})}
}
</script>

父组件拿到更新后的数据，并重新渲染

<template><child :childNeed='parentGive' @noticParent="parentReceive"></child>
<template>
<script>
// 引入子组件
import child from './child.vue'
export default {components: {child},data() {return {parentGive: '父组件将要传给子组件的数据'
}
},methods: {　　parentReceive(msg) {　　console.log(msg.noticData, '从子组件收到的数据')　　}}
}
</script>

这样就解决了子组件数据发生变化，父组件重新渲染的问题。

转载于:https://www.cnblogs.com/buerBlog/p/8568646.html

理解vue中的父组件，子组件相关推荐

vue中无法监听到子组件的事件的问题
是因为在@getList 这样的写法,会在HTML里自动转换为getlist, 因此要想实现这种驼峰,需用下滑线连接,既get_list 转载于:https://www.cnblogs.com/alw ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
理解vue中的组件（二）
上节说到组件https://segmentfault.com/a/1190000009236700,这一节继续来学习组件: 原文博客地址,欢迎学习交流:点击预览从github上获取本文代码:示例代码 ...
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错
一. 报错场景在VUE中使用element-ui的el-select组件时出现该报错 [Vue warn]: Missing required prop: "value" 1 二 ...
深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理 scoped /deep/ 实战总结 scoped vue项目一般是单页面.多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中 ...
怎样理解vue中的slot
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...

理解vue中的父组件，子组件

理解vue中的父组件，子组件相关推荐

最新文章

热门文章