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

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>

本文链接：https://blog.csdn.net/qq_42080467/article/details/117195047

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

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

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

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

前端网页打开摄像头并将图像传给后端，这里用的python的flask web框架，简单演示demo前端模板<!doctype html><html lang="en"><head> <title>GET VIDEO</title> <meta charset="utf-8"> <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使用。请忽略上面样式，哈哈哈哈哈，主要看功能代码里面我做了注释，有什么不清楚的大家一起探讨。直接上代码<!DOCTYPE html&.

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

为什么80%的码农都做不了架构师？>>> ...

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

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