（父子传参）子传父，双向绑定

最新推荐文章于 2022-11-03 19:29:28 发布
最新推荐文章于 2022-11-03 19:29:28 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： html css 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41893686/article/details/111803967
版权
html 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
css
6 篇文章 1 订阅
订阅专栏
内部传参给外面（一）
  • this.$emit(“change”)触发外面的函数，使用ref得到里面的数据，在外面父亲里面求值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部传参传给外面</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <count @change="handleChange" ref="child"></count>
        <!-- 这个可不是count啊 -->
        <div>外部的：{{total}}</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        //全局注册子组件，可直接在div中引入;局部注册子组件，要在根组件中声明
        Vue.component("count", {
            template: "<div @click='handClick'>内部的：{{number}}</div>",
            data: function () {
                return {
                    number: 0
                }
            },
            methods: {
                handClick: function () {
                    // alert("dian")
                    this.number++;
                    // 子组件往父组件传值 
                    this.$emit("change")
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                handleChange: function () {
                    this.total = this.$refs.child.number
                }
            }
        })
    </script>
</body>

</html>
内部传参给外面（二）
  • this.$emit(“language”, JSON.parse(JSON.stringify(config)))
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部给外部传值，对象形式</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <count @language="test"></count>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        //全局注册子组件，可直接在div中引入;局部注册子组件，要在根组件中声明
        Vue.component("count", {
            template: "<div @click='culture'>点击</div>",
            data: function () {
                return {
                    number: 0
                }
            },
            methods: {
                culture() {
                    let config = {
                        number:this.number++,
                        language:"语言"
                    }
                    this.$emit("language", JSON.parse(JSON.stringify(config)))
                },
            }
        })
        	new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                test: function (val) {
                    console.log(val)
                },
            }
        })
    </script>
</body>
</html>

关于v-model的知识点

<child v-model=‘something’>
相当于这样写: <child :value=“something” @input=“value => { something = value }”>

父组件使用v-model与子组件表单实现双向数据绑定。
子组件在props里面接收一下value值，初始化到newValue里面，监听newValue值变化，变化后发射事件到父组件

双向绑定（sync）
  • 语法糖的形式双向传值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <child :show.sync='valueChild'></child>
        //<child :show="valueChild" @update:valueC="valueChild = $event"></child>
        <button @click="changeValue">父组件{{valueChild}}</button>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        Vue.component('child', {
            template: `<div>
                    <p>默认初始值是{{show}}</p>
                    <button @click.stop="closeDiv">子组件更新值</button>
                 </div>`,
            props: ['show'],
            methods: {
                closeDiv() {
                    this.$emit('update:show', false); //触发 input 事件，并传入新值
                }
            }
        })

        new Vue({
            el: "#app",
            data() {
                return {
                    valueChild: true,
                }
            },
            methods: {
                changeValue() {
                    this.valueChild = !this.valueChild
                }
            }
        })
    </script>
</body>
</html>
双向绑定（v-model）
1.只能是value
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>子父组件双向绑定</title>
</head>

<body>
    <div id="app">
        <div>
            父组件中的值：<input v-model='value'></input>
            <compoent v-model="value"></compoent>
        </div>
    </div>
    <script type="text/javascript">
        Vue.component("compoent", {
            props: {
                value: String
            },
            methods: {
                handleChange(e) {
                    this.$emit('input', e.target.value);
                }
            },
            template: `
					<div>
						子组件中的值：<input :value="value" @input="handleChange"></input>
					</div>`,
        })
        	 new Vue({
            el: '#app',
            data() {
                return {
                    value: ''
                }
            },
        });
    </script>
</body>

</html>
2.可以更改
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>子父组件双向绑定</title>
</head>

<body>
    <div id="root">
        <div>
            父组件中的值：<input v-model='value'></input>
            <comp-one v-model="value"></comp-one>
        </div>
    </div>
    <script type="text/javascript">
        Vue.component("compOne", {
            model: {
                prop: 'value1',
                event: 'change'
            },
            props: ['value1'],
            methods: {
                handleChange(e) {
                    this.$emit('change', e.target.value);
                }
            },
            template: `
					<div>
						子组件中的值：<input :value="value1" @input="handleChange"></input>
					</div>`,
        })

       		 new Vue({
            el: '#root',
            data() {
                return {
                    value: ''
                }
            },

        });
    </script>
</body>

</html>

仅仅当个人笔记

闹闹没有闹
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2 子传父，父传子,v-model双向绑定
dyx001007的博客
03-21 1543
父传子 在components里面创建子组件aaaChild.vue //子组件 <aaa-child :list="list" @add="add"></aaa-child> data() { return { list:[ { name:'小明', age:18 }, { name:'小红', age:16 } .
子组件向父组件传参的几种方法
随笔记录，有些许菜，莫怪莫怪
07-19 9239
子组件向父组件传参的几种方法
VUE父组件监听$emit事件，如何传递多个父组件自己的参数
kouryoushine的博客
10-17 4669
背景 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数 父组件监听事件传参有两种方式 方式1：父组件自己无参数 方法名可以不用带参数，函数中的e代表change事件的对象，直接获取参数即可 <uni-rate value="5" @change="clickStar" :activeColor="star...
vue11Vuex解说+子父传参详细使用
全栈
11-03 8547
1. vue组件间通讯1. vue组件间通讯1.1 父子组件1.2 消息总线这种方式需要另外创建一个vue实例，用来当做消息总线1.3 vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作。：1.State：单一状态树2.Getters：状态获取3.Mutations：触发同步事件4.Actions：提交mutation，可以包含异步操作。
vue父子组件传参的几种方式
秋来九月八
01-05 2万+
如果你的父子组件之间在不同的路由中，你可以使用路由参数来传递数据。在父组件中触发事件，而子组件监听事件以接收数据。你可以在父组件中使用 $emit 发送自定义事件，然后在子组件中监听该事件来传递数据。子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。在父组件和子组件中都可以访问和修改 Vuex 存储的数据。在发送事件的组件中使用 $emit 来触发事件。在接收事件的组件中使用 $on 来监听事件。
如何实现iframe父子传参通信
10-15
以上就是实现`iframe`父子传参通信的主要方法，包括非跨域和跨域场景。在实际应用中，需要根据具体的需求选择合适的方式，并注意处理可能出现的安全问题。对于跨域通信，还可以考虑使用CORS（跨源资源共享）或者...
解决Vue2.x父组件与子组件之间的双向绑定问题
08-27
"解决Vue2.x父组件与子组件之间的双向绑定问题" Vue.js是一款流行的前端框架，它提供了强大的组件化和数据绑定机制。但是，在使用Vue时，开发者经常遇到的一问题就是父组件与子组件之间的双向绑定问题。双向绑定是...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定。本文将深入探讨如何在Vue中使用`sync`修饰符以及它的工作原理。 首先，让我们回顾一下问题的背景。...
详解vue中的父子传值双向绑定及数据更新问题
10-16
主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
本文将详细讲解Vue中的四种主要传值方式：父传子、子传父、兄弟组件间的通信以及非父子组件间的通信。 1. **父传子（Props）** - **概念**：父组件向子组件传递数据是通过`props`属性实现的，它允许父组件的数据向...
Vue组件中的父子传参,子父传参,兄弟传参,以及事件总线
多看书少吃饭的博客
04-20 2055
vue中的组件传参方式还是蛮多的,但是理解以后发现是非常很简单的,所以我在这里就做一个很简约的总结,首先是父子传参 父子传参 父组件中的代码 <template> <div> <!-- :getname 是自定义的 --> <son-1 :getname="name"></son-1> </div> </template> <script> import Son1 from '@
Vue 父子组件实现数据双向绑定效果的两种方式
热门推荐
shijialeya
06-07 2万+
Vue 父子组件实现双向绑定效果的两种方式
Vue组件子传父参数的方法总结 ,兄弟组件传参方法，emit /update / .sync用法
qq_39232672的博客
07-11 2587
1- $emit 在子组件中，给input添加了bind，并调用一个method：getValue <div class="register"> <input id="register-ipt" type="text" placeholder="请输入您的手机号" @input="getValue"> <router-link to="/register" tag...
vue中子父、父子之间传参+双向传参
CoCoManYYn的博客
05-14 4323
转自：https://blog.csdn.net/m0_37068028/article/details/72898119vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$onvm.$on( event, callback )监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$emit(...
父向子传值，解决子组件数据的双向数据绑定和子组件调用父组件中的方法
qq_39038793的博客
06-30 222
一、问题：在父组件向子组件传值过程中，修改子组件中的值，父组件中的值也会发生变化 方案：将传递 的值序列化，使用JSON.stringify(),子组件在解析JSON.parse() 父组件： <template> <div class="work-content"> <table> <thead> <tr> <td>序号</td>...
vue的父传子，子传父，非父子之间的传值
weixin_42921043的博客
12-11 503
VUE常用的三种传值方式 1.父传子 2.子传父 3.非父子传值 父子之间的传值 在vue.js中，父子组件之间的关系可以理解为props down(父传子props) events up(子传父用事件)，如图所以： 想要搞明白父传子，必须了解prop： 什么是prop： Prop是用来传递数据的一种自定义属性。 Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下...
子向父传参1——$emit用法
qq_30541261的博客
12-12 250
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv...
Salesforce LWC学习(四) 父子component交互 / component声明周期管理 / 事件处理
weixin_30955617的博客
08-17 1025
我们在上篇介绍了 @track / @api的区别。在父子 component中，针对api类型的变量，如果声明以后就只允许在parent修改，son component修改便会导致报错。 sonItem.html 1 <template> 2 <lightning-input value={itemName} onchange={changeItem...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3941
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue3父子组件传参，父组件通过v-model绑定传参，子组件如何接收
最新发布
05-31
在Vue3中，父子组件传参的方式与Vue2类似，可以通过props来实现。 父组件可以通过v-model绑定一个值，并将这个值通过props传递给子组件。子组件在props中声明这个参数，就可以接收到父组件传递过来的值。 例如，父...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值