vue单文件完成父组件向子组件传值

最新推荐文章于 2021-08-18 08:54:07 发布
最新推荐文章于 2021-08-18 08:54:07 发布
阅读量282 收藏
点赞数 1
文章标签： vue 组件间传值 slice方法不成功 data里用函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41223276/article/details/103054412
版权

父组件向子组件传值

  • 流程：父组件向子组件传递数据，首先要在父组件中使用v-bind命令将要传递的数据绑定到子组件上，在子组件中的props属性接收父组件传递过来的数据

  • 测试选题

    • 测试传基本类型
    • 测试传对象类型
    • 测试传数组类型

  • 目的：测试父组件传递不同类型数据给子组件，观察子组件是否可以动态渲染

测试一 传基本类型

  • 由父组件由字符串改数值加字符串，观察能否动态渲染
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="father">
        <son-component :message="fatherMessage"></son-component>
        <button class="button" @click="handleButtonClick"> 字符串数值类型混合传值 </button>
    </div>
    <script>
        Vue.component("son-component", {

            template: `<div id="son" ><p>{{this.message}}</p></div>`,
            props: ["message"]
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: 'Hello son!'
                }
            },
            methods: {
                handleButtonClick() {
                    this.fatherMessage = "字符串数值混合传值" + 1820299979 + "@qq.com"
                }
            }
        })
    </script>
</body>

</html>

测试二 传对象类型

  • 父组件新增加一个key **结论：**子组件可以成功动态渲染

  • 父组件修改一个key的value **结论：**子组件可以成功动态渲染

  • 父组件修改变对象的引用 **结论：**子组件可以成功动态渲染

  • 父组件key:null改成有值 **结论：**子组件可以成功动态渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="father">
        <son-component :message="fatherMessage"></son-component>
        <button class="button" @click="handleButtonAddClick"> 新增一个对象</button>
        <button class="button" @click="handleButtonChangeClick"> 改变对象value值</button>
        <button class="button" @click="handleButtonChangeYinYongClick"> 改变对象的引用</button>
        <button class="button" @click="handleButtonChangeEmptyClick"> 由空对象变成有值</button>
    </div>
    <script>
        Vue.component("son-component", {

            template: `<div id="son" ><p>{{this.message}}</p></div>`,
            props: {
                message: {

                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: {
                        city: "杭州",
                        test: null
                    }
                }
            },
            methods: {
                handleButtonAddClick() {
                    this.fatherMessage.block = "西湖区"
                },
                handleButtonChangeClick() {
                    this.fatherMessage.city = "哈尔滨"
                },
                handleButtonChangeYinYongClick() {
                    this.fatherMessage = {
                        movie: "流浪地球",

                    }
                },
                handleButtonChangeEmptyClick() {
                    this.fatherMessage.test = "征服未知，勇做先躯"
                }
            }
        })
    </script>
</body>

</html>

测试三 传数组类型

  • 父组件新增加一个元素 **结论：**子组件可以成功动态渲染

  • 父组件修改一个元素 **结论：**子组件可以成功动态渲染

  • 父组件用splice方法删除数值 **结论：**子组件可以成功动态渲染

  • 父组件由slice方法切割数值 结论：子组件不能完成动态渲染

  • 父组件改变数组的引用 **结论：**子组件可以成功动态渲染

  • 说明

Slice方法并不会修改数组，而是返回一个子数组。

解决方案：把返回的子数组赋值给数组

this.fatherMessage = this.fatherMessage.slice(4, 8)

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="father">
        <son-component :message="fatherMessage"></son-component>
        <button class="button" @click="handleButtonAddClick"> 新增一个数值</button>
        <button class="button" @click="handleButtonChangeClick"> 改变一个数值</button>
        <button class="button" @click="handleButtonSpliceClick"> 用splice方法切数值</button>
        <button class="button" @click="handleButtonSliceClick"> 用slice方法切数值</button>
        <button class="button" @click="handleButtonChangeEmptyClick"> 改变数组的引用</button>
    </div>
    <script>
        Vue.component("son-component", {

            template: `<div id="son" ><p>{{this.message}}</p></div>`,
            props: {
                message: {

                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                }
            },
            methods: {
                handleButtonAddClick() {
                    this.fatherMessage.push(2333)
                },
                handleButtonChangeClick() {
                    this.fatherMessage[2] = 333
                },
                handleButtonSpliceClick() {
                    this.fatherMessage.splice(5, 1)
                },
                handleButtonSliceClick() {
                    this.fatherMessage.slice(6, 8)
                },
                handleButtonChangeEmptyClick() {
                    this.fatherMessage = [9, 8, 7, 6, 5, 4, 3, 2, 1]
                }
            }
        })
    </script>
</body>

</html>

二.子向父传值

  • 测试选题

    • 子组件通过$emit()向父组件传值
    • 子组件通过父组件传来的prop（基本类型）传值
    • 子组件通过父组件向子组件传递函数，子组件修改参数传值
    • 通过总线方式传值
    • 通过父组件prop传来的对象，子组件修改对象value传值

  • **目的：验证 子向父传值共有几种方式 **

测试一 通过$emit()传值

  • 结论：子可以将值传给父组件，并且可以完成动态渲染
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="father">
        {{this.fatherMessage}}
        <son-component @thorwfather="thorwfather">

        </son-component>


    </div>
    <script>
        Vue.component("son-component", {

            template: `<button class="button" @click="handleClick"> 子组件传值（1）</button>`,
            props: {
                message: {

                }
            },
            data() {
                return {
                    sonMessage: "子组件传来的值"
                }
            },
            methods: {
                handleClick() {
                    this.$emit("thorwfather", this.sonMessage)
                }


            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: "父组件的初值"
                }
            },
            methods: {
                thorwfather(data) {
                    this.fatherMessage = data
                }
            }
        })
    </script>
</body>

</html>

测试二 修改父组件传来的prop

  • 结论：无法传值并且无法动态渲染

  • 原因：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

  • 报错信息：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: "message"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }       
        .button {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="father">
        <son-component :message="fatherMessage"></son-component>
        {{fatherMessage}}
    </div>
    <script>
        Vue.component("son-component", {
            template: `<div id="son" ><button class="button" @click="handleButtonChangeClick"> 修改父组件传来的props值</button> </div>`,
            props: {
                message: {
                }
            },
            methods: {
                handleButtonChangeClick() {
                    this.message = "子组件改变的值"
                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: "父组件传来的值"
                }
            },
            methods: {}
        })
    </script>
</body>
</html>

测试三 通过父组件传来函数并传参完成传值

  • 结论：父组件可以接收到值并且可以动态渲染

  • 备注：prop不止可以传递data里面的数据，mathods里面的方法也可以传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }     
        .button {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="father">
        {{reversedMessage}}
        <son-component :message="fatherFunction"></son-component>
    </div>
    <script>
        Vue.component("son-component", {
            template: `<div id="son" ><button class="button" @click="handleButtonChangeClick"> 修改父组件传来的props值</button> </div>`,
            props: {
                message: {
                    type: Function,
                }
            },
            data() {
                return {
                    son: "子组件传来的值"
                }
            },
            methods: {
                handleButtonChangeClick() {
                    this.message(this.son)
                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: "父组件的值",
                }
            },
            computed: {
                reversedMessage() {
                    return this.fatherMessage
                }
            },
            methods: {
                fatherFunction(data) {
                    this.fatherMessage = data
                }
            }
        })
    </script>
</body>
</html>

测试四 总线的方式传值

  • 结论：可以完成传值并动态渲染
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="father">
        {{fatherMessage}}
        <son-component></son-component>
    </div>
    <script>
        var eventBus = new Vue()
        Vue.component("son-component", {
            template: `<div id="son" ><button class="button" @click="handleButtonChangeClick"> 修改父组件传来的props值</button> </div>`,
            data() {
                return {
                    son: "子组件传来的值"
                }
            },
            methods: {
                handleButtonChangeClick() {
                    eventBus.$emit("zongxian", this.son)
                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: "父组件的值",
                }
            },
            created() {
                eventBus.$on("zongxian", (data) => {
                    this.fatherMessage = data
                })
            }
        })
    </script>
</body>

</html>

测试五 通过父组件传来的对象进行传值

  • 结论：可以传值并动态渲染
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #father {
            display: flex;
            justify-items: center;
            flex-direction: column;
        }
        
        .button {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="father">
        <son-component :message="fatherMessage"></son-component>
        {{fatherMessage}}
    </div>
    <script>
        Vue.component("son-component", {
            template: `<div id="son" ><button class="button" @click="handleButtonChangeClick"> 修改父组件传来的props值</button> </div>`,
            props: {
                message: {}
            },
            methods: {
                handleButtonChangeClick() {
                    this.message.city = "北京"
                }
            }
        })
        new Vue({
            el: '#father',
            data() {
                return {
                    fatherMessage: {
                        city: "杭州"
                    }
                }
            },
            methods: {}
        })
    </script>
</body>

</html>
马尾。
关注
vue.js单文件组件中非父子组件的传值实例
10-18
今天小编就为大家分享一篇vue.js单文件组件中非父子组件的传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
Vue单文件组件传值router-link
qq_15034541的博客
03-18 160
组件的传值不同于我们之前的？传值，他需要用到vue规定的传值方法 我们在index.js文件中定义的路由规则中，多了一项name值这起到了我们的连接作用 index.js const routes = [ { path: "/list/:id", name: "List", component: List, }, ] List.vue <router :to="{name:'List',params:{id:1}"> 这样实现传值 1.6.7.
[实力入坑]VUE-父组件向子组件传值
张泽的博客
06-02 263
这里写一种简单、实用vue父组件向子组件传值的方式。（感觉vue文档有很多地方没写清楚） 比如：routlink.vue是我要展示的页面，tables.vue是需要调用的组件（另外一个页面）。 本人使用的是ElementUI组件，大家直接复制的话可能是跑不起来的，不过这种方式很简单明了。 直接进行局部组件注册，在所需要的文件scrip中导入即可，需要在components中写入就行。 一些相关说明直接在注释里，采用的是props传值方式。 下面是routlink.vue <template >
单文件组件的组件传值_史上最全！vue的7种组件通信方式
weixin_39779928的博客
11-20 690
点击前端充电营，关注我们前言今天我们来聊聊Vue的组件通信。相信使用过Vue的一些小伙伴很容易脑海中总结出Vue常用的几种通信方式Props + $emitEventBusVuex其实除了这几种方式，还有另外一些通信方式也很实用，下面来看下吧。组件通信类别首先，要学习组件的通信方式，我们得先了解Vue究竟有多少种通信种类。基本上通信类别可以分成下面几类：父子组件通信兄弟组件通信隔代组件通...
vue-cli 父组件向子组件传递参数2
guohao326的博客
09-18 525
Vue实现子组件向父组件传值
my_love_download的博客
12-04 572
vue是一个很流行的前端框架,在实际的开发中,我们会遇到子组件向父组件中传值的问题,本文总结一下在vue如何使用子组件向父组件传值! 创建一个父组件 <template> <div> <h2>{{name}}</h2> <Child @giveName="getName"></Child> <...
vue实现子组件向父组件传值
weixin_40252368的博客
08-18 329
一、子组件触发父组件中的函数 第一种方法比较常见，是子组件通过触发父组件的方法，以参数的形式给父组件传值。这种方法有几种形式： 子组件向父组件传递一个值 子组件：this.emit('change', this.value); 父组件：<test @change="getParams($event)" /> <test @change="getParams" /> 绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event
⒒ Vue子组件向父组件传值
CRMEB小程序商城的博客
01-11 1万+
组件之间传值 父组件向子组件传值使用props，参考：父组件向子组件传值！ 子组件向父组件传值，主要是以下三个步骤组成： 在子组件中自定义一个事件，使用 this.$emit('btn-click', item)的语法，emit指代发射事件，btn-click是我们自定义的事件名，item是子组件中的数据。 注意：：vue官方推荐你始终使用 kebab-case格式的事件名。 在父组件中使用v-on监听在子组件中我们自定义的数组，并为其在父组件中定义一个接收监听的事件 在父组件中接收数据 老规矩，看
vue 子组件向父组件传值方法
08-27
首先，父组件通过`props`向子组件传递一个值，然后子组件在完成计算或处理后，通过`$emit`将新的值返回给父组件，父组件再更新自身的状态。 总结，Vue.js中子组件向父组件传递数据主要依赖于自定义事件和`$emit`...
vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）...
weixin_30896763的博客
03-26 189
看了很多文章，官网文档也有看，对父子组件通信说的不是很明白；决定自己总结一下； vue一般都使用构建工具构建项目；这样每个组件都是单文件组件；而网上很多文章都是script标签方式映入vue，组件通信也是在一个文件中进行； 单文件组件形成的父子关系组件之间的通信的文章还没看到 。看到掘金和博客园的两篇文章决定自己写一个单文件组件之间通信 一般来说想比较少的数据可以通过事件发射和属性传递来形成...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
vue-单文件组件-父子传值和父子嵌套组件应用
weixin_44867717的博客
02-08 829
vue-单文件组件-父子嵌套组件应用 多个组件可以在一起使用，它们的关系可以是：平行的、嵌套包含的 目标：应用两个组件，它们是彼此嵌套包含的关系 步骤： ​ 计划 index.html 引入使用 Fat.vue , Fat.vue引入使用 Son.vue 创建两个组件：./components/041-Fat.vue 和 ./components/042-Son.vue 在src/...
单文件组件.vue---父子组件通信
weixin_30549657的博客
04-09 141
每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。 【一】父组件→子组件 （1）父组件传递数据 　在vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签...
vue的组件间传值
lanseguhui的博客
11-10 264
​​​​​父组件向子组件传值 1.父组件中引入子组件，直接使用v-bind在子组件标签上传值 <template> <div> <homeBar :fcMsg="fcMsg"/> <div class="father"> {{fcMsg}} </div> </div> </template> <script> import homeBar from './ho
vue 子组件向父组件传值
weixin_42138029的博客
12-13 143
子组件： <template> <div class="child"> <button @click="handleClick">子传父</button> </div> </template> <script> import Vue from 'vue' export default { ...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue.js单文件组件中非父子组件的传值
烟火的博客
08-17 2076
vue.js单文件组件中非父子组件的传值最近在研究vue.js，总体来说还算可以，但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题，今天在这里讲讲，希望对大家有所帮助！ 在官网api中的这段讲解很少，也很模糊；官网中说明如下：非父子组件通信： 有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线： var bus =
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
热门推荐
华世中国的博客
01-09 34万+
Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。先给大家介绍Vue常见的三种传值方式
Vue 单文件中的数据传递
积累点点滴滴
09-05 1417
Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况： 父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两个同级组件之间传递数据，通过 event bus 传递数据。 新建了 6 个文件，分别是： index.htmlmain.js 「Vue 实例」app.v
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值