Vue父子组件通信_comen on彬彬的博客-程序员宝宝_子组件{{}}接受父组件

技术标签: Vue  vue  vue.js  html  javascript  

Vue父子组件通信


# 父传子

父组件通过属性的形式给子组件传递 

    <div id="app">
        <!-- 父组件通过属性形式给子组件传值 -->
        <counter :num="0"></counter>
        <counter :num="1"></counter>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>

        // 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            template : '<div>{
   {num}}</div>'
        }

        var vm = new Vue({
            el: '#app',
            // 注册子组件
            components:{
                counter: counter
            }
        })
    </script>
    

 

子组件接收过来的 props 是不可以修改


vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 

原因是在使用组件时,传入的prop,被组件内部又做了一次修改,然后抛的异常,比如如下使用组件的代码(修改的是num属性):

 // 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            template : '<div @click="addNum">{
   {num}}</div>',
            methods: {
                // 如果我们直接对 父组件传来对 num 直接修改会报错
                addNum(){
                    this.num++;
                }
            },
        }

 

解决方法 需要在子组件 data定义一个属性克隆父组件传来的值


// 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            // 将 父组件 num换子组件克隆对 newNum
            template : '<div @click="addNum">{
   {newNum}}</div>',
            data(){
                return {
                    // 克隆父组件传来对 num
                    newNum: this.num
                }
            },
            methods: {
                // 如果我们直接对 父组件传来对 num 直接修改会报错
                addNum(){
                    this.newNum++;
                }
            },
        }

# 子传父


子组件跟父组件传值通过事件的形式

子组件发送: this.$emit(发送方法,数据)

父组件接收:<子组件 @发送方法="接收方法"> </子组件>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子传父</title>
</head>
<body>
    <div id="app">
        <!-- 父组件接收子组件 -->
        <son @change='sonName'></son>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        // 定义子组件
        var son = {
            // 定义按钮触发 子组件给 父组件传值事件
            template: '<button @click="hanleMyName">发送给父组件</button>',
            data(){
                return {
                    name: 'fubinbin'
                }
            },
            methods: {
                hanleMyName(){
                    // 子组件通过事件给父组件传值
                    // 参数1 事件名称(自定义)
                    // 参数2 传递的内容
                    this.$emit('change',this.name)
                }
            },
        }

        var vm = new Vue({
            el:'#app',
            // 注册子组件
            components:{
                son: son
            },
            methods: {
                // 接收子组件传来的值
                sonName(value){
                    console.log(value)
                }
            },
            
        })
    </script>
</body>
</html>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42080467/article/details/117195047

智能推荐

苍了个天,记一次Linux(被黑客)入侵......_程序员大咖的博客-程序员宝宝

Python实战社群Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲来源丨网络安全编程与黑客程序员https://mp....

前端网页打开摄像头并将图像传给后端_blog_1103的博客-程序员宝宝

前端网页打开摄像头并将图像传给后端,这里用的python的flask web框架,简单演示demo前端模板&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;GET VIDEO&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script src="{{ url_for('static', filename='js/jquery-1.7.1

37 协程_weixin_34315485的博客-程序员宝宝

协程进程:资源单位线程:执行单位协程:单线程下实现并发(能够在多个任务之间切换和保存状态来节省IO)多道技术:   空间上的复用   时间上的复用核心:切换+保存状态注意:  操作系统的切换+保存状态是针对多个线程,  想在单个线程下自己手动实现操作系统的切换+保存状态的功能,协程产生  由于协程是程序员自己想出来并实现,它对于操作系统来说根本不存在...

JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端_六卿的博客-程序员宝宝_gamecanvas-4.0.js

对上一个文章JS配合canvas实现贪吃蛇小游戏做了一个大更新,可以手指控制可以键盘控制,APP端控制方向极为丝滑,代码可以直接copy使用。请忽略上面样式,哈哈哈哈哈,主要看功能代码里面我做了注释,有什么不清楚的大家一起探讨。直接上代码&lt;!-- * @Descripttion: * @Author: zhangJunQing * @Date: 2021-04-25 * @LastEditors: zhangJunQing 1--&gt;&lt;!DOCTYPE html&.

使用PL/SQL对oracle表进行解锁_weixin_34208185的博客-程序员宝宝

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

Spark常用函数讲解_weixin_30848775的博客-程序员宝宝

1.mapValus2.flatMapValues3.comineByKey4.foldByKey 5.reduceByKey6.groupByKey7.sortByKey8.cogroup9.join10.LeftOutJoin11.RightOutJoin1.mapValus(fun):对[K...

随便推点

学习笔记(10):python flask web开发入门与项目实战-flask基于方法的类视图_Felix_Wu_2017的博客-程序员宝宝

Web网站发展至今,特别是服务器端,涉及的知识非常广泛,这对程序员的要求会越来越高。如果采用成熟、稳健的框架,那么一些诸 如安全性、数据流控制等类型的基础性工作都可以让框架来处理,而程序开发人员则可以把更多的精力放在具体业务逻辑功能的实现和优化上。 使用Flask框架的优势有以下几点: 可以大大降低开发难度,提高开发效率,让快速、高效的Web开发成为...

程序员成长为架构师必备的十项技能_吴江2000的博客-程序员宝宝

一、卓越的程序员     1. 每个好架构师都是一位出色的程序员     架构师,听起来是如此神秘的一个称号。尤其是在开发领域刚入门不久的菜鸟级程序员眼中,架构师都是高手,都是牛人,都是如此高高在上的存在。    不过,在搞了四、五年编程之后,程序员们往往早已失去了当年对这些“高级”职位的神秘感,甚至会对自己所在项目的架构师抱怨不已,背后里称他们是一群水王。所以有江南白衣曾

如何让word设置连续的页码,解决不同页面页码相同问题_按时下班<( ̄︶ ̄)[GO!]的博客-程序员宝宝_页码链接到上一节保证后续页码格式相同

解决前的:两个底部页码相同解决方法:第一步:选择插入—&gt;页码—&gt;设置页码格式—&gt;选择起始页码(设置1)亦或者选择续前节(前面的页码没有错误的情况下选择这个)—&gt;点击确定第二步:删除页面底端原有的页码(此部也可以放在第一步前执行)第三步:插入—&gt;页码—&gt;页面低端—&gt;普通数字1最终结果:...

(纪中)1340. 周长【状压DP】_。十二。的博客-程序员宝宝

解题思路看到N&lt;=15N&lt;=15N&lt;=15,想到状压DP,设f[i][j]f[i][j]f[i][j]表示状态为i,ii,ii,i为0/10/10/1二进制数表示哪一位 没用过/用过 的状态,jjj表示现在最右的农田为第j个农田,得:枚举上一个状态iii,上一个状态最右的农田jjj,当前状态最右的农田kkk。这都这些可以推出当前状态含kkk也含jjj,t=i∣(1&lt;&lt;(k−1))t=i|(1&lt;&lt;(k-1))t=i∣(1&lt;&lt;(k−1))当a[...

text-align:justify无效处理方式_trifling_的博客-程序员宝宝

原理:text-align只对最后一行之前的行生效,如果你只有一行则需特殊处理。1、使用text-align-last,并将其设置为justify。text-align-last不是所有浏览器支持。2、手动添加一行最为最后行,并将其隐藏。

VGG网络模型搭建 - Pytorch_J1ay的博客-程序员宝宝

【Pytorch】 vgg官网vgg学习传送门vgg特点堆叠多个3 * 3 卷积核来替代大尺度卷积核 (减少所需的参数)并且,论文中提出 堆叠 2个 3 * 3 卷积核 可以代替 5 * 5 的卷积核, 3个 3 * 3 卷积核 可代替 7 * 7说明我们假设 输入输出的channel数为C :对于 7 * 7 的卷积核来说,它所需要的参数为: 7 * 7 * C * C = 49C^2而对于1个 3 * 3 的卷积核来说, 需要的参数为: 3 * 3 * C *

推荐文章

热门文章

相关标签