vue 子的值传给父的值

最新推荐文章于 2024-03-25 13:01:07 发布
最新推荐文章于 2024-03-25 13:01:07 发布
阅读量160 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44081699/article/details/88312123
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <style>
        table {
            width: 500px;
            border: 1px solid;
            margin: 10px auto;
        }

        td {
            padding: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="tab">
<table >
    <tbody>
        <tr style="background-color: #008000;color: white;">
            <td colspan="3">父组件</td>
        </tr>
        <tr>
            <td>name</td><td>{{name}}</td><td><input type="text" v-model="name"/></td>
        </tr>
        <tr>
            <td>age</td><td>{{age}}</td><td><input type="text" v-model="age"/></td>
        </tr>
    </tbody>
</table>
       <v-son  :sname="name"   @chan="fchange"  :sage="age"></v-son>
</div>


<template id="moban">
    <div>
        <button @click="chanfa">儿子</button>
        <table>
            <tbody>
            <tr style="background-color: #008000;color: white;">
                <td colspan="3">{{name}}</td>
            </tr>
            <tr>
                <td>name</td><td>{{name}}</td><td><input type="text" v-model="name"/></td>
            </tr>
            <tr>
                <td>age</td><td>{{age}}</td><td><input type="text" v-model="age"/></td>
            </tr>
            </tbody>
        </table >
        <v-sons></v-sons>
    </div>
</template>

<template id="moban2">
    <div>
        <table>
            <tbody>
            <tr style="background-color: #008000;color: white;">
                <td colspan="3">{{names}}</td>
            </tr>
            <tr>
                <td>name</td><td>{{names}}</td><td><input type="text"/></td>
            </tr>
            <tr>
                <td>age</td><td>{{ages}}</td><td><input type="text"/></td>
            </tr>
            </tbody>
        </table >
    </div>
</template>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    new Vue({
       el:"#tab",
        data:{
           name:"父组件",
            age: "18"
        },
        methods:{
          fchange (val){
           this.name=val
          }
        },
        components: {
            "vSon":{
                props:['sname',"sage"],
                data(){
                    return{
                        name:this.sname,
                        age:this.sage
                    }
                },
                methods:{
                    chanfa(){
                        this.$emit("chan",this.name)
                    }
                },
                template:"#moban",
                components: {
                    "vSons":{
                        data(){
                            return{
                                names:"后代组件",
                                ages:"8"
                            }
                        },
                        template:"#moban2",
                    }
                }
            }
        }
    });
</script>
</html>
刘一卓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中父子之间的传值
lalao123_的博客
11-26 127
vue中子到父子之间的传值(props、ref、emit) 父子组件 //父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '....
vue 父子传值 方法大全
程序员小哲的博客
10-09 3372
vue 父子传值 方法大全一、通过props传递数据父页面子页面二、子控件给父控件传递值父页面子页面三、插槽slot四、vuex 一、通过props传递数据 只能是父控件传递给子控件 父页面 <template> <div id="app"> <HelloWorld1 width="400" height="500" arr="[1,2,3,4,5]" /> </div> </template> <script> i
Vue子传父详细教程
热门推荐
m0_62956518的博客
05-05 3万+
子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。 本文父组件：shopping.vue 子组件：shoplist.vue 1.第一步，在父组件中引入子组件（父组件内） import shoplist from '../shoplist.vue' 2.在子组件内定义数据（子组件内） data() { return { children:"this is children" };......
Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
weixin_65793170的博客
03-25 4947
在 语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。
Vue 子组件修改父组件值的解决方法
Superman_peng的博客
10-21 1万+
分析 vue中父组件向子组件传值时，其父子prop之间形成单向下行绑定，反过来则不行，这样可以防止子组件意外改变父组件的值，怕子组件污染父组件，造成不可控； 此外，每次父组件的数据发生更新时，子组件的值都会更新到最新的数据，但不能直接在子组件内部改变prop（父组件传过来的值），否则浏览器就会发出警告 但我们可能会遇到，需要在子组件修改父组件值的需求，这里介绍三种方法实现： 实现 方法一：通过$emit派发一个自定义事件，父组件收到后，由父组件进行修改 子组件：接受父组件传来的cateId值，但是子组件
详解VUE里子组件如何获取父组件动态变化的值
10-17
接下来，如果子组件需要对传入的 `status` 值进行操作，并将结果反馈给父组件，我们需要在子组件的 `data` 函数中创建一个新的属性，例如 `switchStatusData`，并将 `props` 中的 `status` 赋值给它： ```...
vue父组件触发事件改变子组件的值的方法实例详解
10-17
本篇文章将详细讲解如何在Vue中实现父组件触发事件来改变子组件的值。 首先，我们要理解Vue中的父子组件通信机制。Vue提供了多种方式来进行这种通信： 1. **通过props向下传递数据**：父组件可以通过props属性将...
Vue的props父传子的示例代码
10-15
当父组件渲染时，它会传递 `imgs1` 的值给子组件的 `xxoo` prop。子组件接收到这个值后，将其作为 `img` 标签的 `src` 属性，从而显示指定的图片。 注意，`props` 的数据类型可以是 `String`、`Number`、`Boolean`...
解决vue 子组件修改父组件传来的props值报错问题
10-16
以上就是在Vue中解决子组件修改父组件props值报错问题的方法。通过使用计算属性、数据或事件，我们可以保持数据流动的单向性，确保组件间的通信清晰且易于维护。记住，良好的组件设计应当遵循Vue的最佳实践，这样...
vue父组件给子组件传值
12-21
例如，父组件有一个`parentName`数据属性，我们可以这样传给子组件： ```html <child-component v-bind:name="parentName"></child-component> ``` 3. **动态Props**： 如果父组件的数据是动态变化的，Vue会...
html css js网页设计
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
2023年数字乡村建设解决方案PPT(34页).pptx
07-12
数字乡村建设解决方案旨在通过数字化转型促进乡村振兴和农业农村现代化。该方案强调了数字乡村建设的战略机遇，以"1+3+5"工程为总体框架，即一个大数据中心、三大服务平台和五类主题应用。方案着重于乡村治理、产业发展和公共服务三大问题，通过完善治理体系、升级治理能力、强化产业链条和改善资源配置来推动乡村全面振兴。 方案中提出的数字乡村大数据中心是信息资源的集散地，依托大数据、AI、物联网等新技术，实现数据驱动的决策支持。三大服务平台包括产业服务、民生服务和治理服务，旨在提升农业生产智能化、经营网络化，同时优化乡村治理结构和提升服务效能。五类主题应用覆盖生产管理、流通营销、行业监管、公共服务和乡村治理，通过具体业务应用体系，实现农业全产业链的数字化管理和服务。 预期建设效益包括通过信息技术促进乡村优势产业发展，形成城郊融合型数字乡村治理新模式，以及创新服务方式，提升服务能力，保障农民权益。整体而言，该方案以数字化为手段，推动乡村经济、治理、文化等多方面的全面升级和发展。
脉冲强光技术在灭菌烧结固化应用解决方案
07-12
脉冲强光技术在灭菌烧结固化应用解决方案，已经得到厂家授权，可以对外公示。
2024年欧洲辣椒素市场主要企业市场占有率及排名.docx
07-12
2024年欧洲辣椒素市场主要企业市场占有率及排名.docx
1ewqeqweqweqweq
07-12
1ewqeqweqweqweq
DS18B20资源useless，don‘t download
07-12
DS18B20资源useless，don‘t download
Go语言实现冒泡、快排及堆排序.docx
07-12
Go语言实现冒泡、快排及堆排序.docx Go语言实现冒泡、快排及堆排序.docx Go语言实现冒泡、快排及堆排序.docx Go语言实现冒泡、快排及堆排序.docx
[OGSM]认识年度经营计划管理.pptx
最新发布
07-12
[OGSM]认识年度经营计划管理.pptx
哈尔滨理工大学考研15个学院，71个专业课历年考试真题及答案汇总，备考资料题库笔记，录用名单汇总
07-12
哈尔滨理工大学考研15个学院，71个专业课历年考试真题及答案汇总，备考资料题库笔记，录用名单汇总
vue子组件的值传给父组件
06-10
在 Vue 中，子组件向父组件传递数据的方式是通过触发一个自定义事件，并将数据作为事件参数进行传递。以下是一个简单的示例： 子组件： ``` 传递数据给父组件 export default { methods: { sendData() ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值