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

最新推荐文章于 2024-05-14 20:49:55 发布

闹闹没有闹

最新推荐文章于 2024-05-14 20:49:55 发布

阅读量1.3k

点赞数

分类专栏： html css 文章标签： vue.js

本文链接：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
评论
（父子传参）子传父，双向绑定

内部传参给外面（一）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>内部
复制链接

扫一扫

专栏目录