vue 单向数据流例子

最新推荐文章于 2022-08-25 17:08:37 发布
最新推荐文章于 2022-08-25 17:08:37 发布
阅读量244 收藏
点赞数 1
分类专栏： vue 文章标签： 单向数据 父变子跟着变 子变父跟着变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcc_2269861428/article/details/102501686
版权

1、父变子也变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
</head>
<body>
    <div id="rou">
        <father></father>
    </div>

    <template id="father">
        <div>
            <h3>我是父组件</h3>
            <input type="text" v-model="name"/>
            <hr />
            <son :name="name"></son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3>我是子组件</h3>
            <h3>从父获取的数据:{{name}}</h3>
        </div>
    </template>

        <script>
            var aj = new Vue({
                el: '#rou',
                data: {
                    type:'role'
                },
                components: {
                    'father': {
                        template: '#father',
                        data: () => {
                            return {
                                name: '父数据'
                            }
                        },
                        components: {
                            'son': {
                                template: '#son',
                                props: ['name']
                            }
                        }
                    },

                },
            })
        </script>
    </body>
    </html>

2、子向父传递

    1）使用.sync

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"></script>
</head>
<body>
    <div id="rou">
        <input type="text" v-model="name"/>
        <father :name.sync="name"></father>
    </div>

    <template id="father">
        <div>
            <h3>我是子组件</h3>
            <h3>{{name}}</h3>
            <button @click="change">子传父</button>
        </div>
    </template>


    <script>
        var aj = new Vue({
            el: '#rou',
            data: {
                name: 'role'
            },
            components: {
                'father': {
                    template: '#father',
                    props: ['name'],
                    methods: {
                        change(){
                            this.$emit('update:name', 'xcc')
                        }
                    }  
                },

            },
        })
    </script>
</body>
</html>

    2）通过对象属性

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
</head>
<body>
    <div id="rou">
        <father></father>
    </div>

    <template id="father">
        <div>
            <h3>我是父组件</h3>
            <h3>{{user.name}}</h3> 
            <hr />
            <son :user="user"></son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3>我是子组件</h3>
            <h3>{{user.name}}</h3>
            <button @click="change">子传父</button>
        </div>
    </template>

        <script>
            var aj = new Vue({
                el: '#rou',
                data: {
                    type:'role'
                },
                components: {
                    'father': {
                        template: '#father',
                        data: () => {
                            return {
                                name: '父数据',
                                user: {
                                    name:'父'
                                }
                            }
                        },
                        components: {
                            'son': {
                                template: '#son',
                                props: ['user'],
                                methods: {
                                    change() {
                                        this.user.name = 'xcc'
                                    }
                                }
                            },
                        }
                    },

                },
            })
        </script>
    </body>
    </html>

 

前方太黑暗
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
virtual-dom-unidirectional-example:演示使用EventEmitter和Websockets进行单向数据流的virtual-dom示例
05-18
虚拟dom单向示例 示例演示从渲染功能元素通过EventEmitter返回的单向数据流 使用，的WebSockets和 / 与 快速开始 $ npm install $ npm run watch & $ npm start 命令 npm run build用于生产的js npm run watch watch-根据文件更改自动构建js以进行开发 npm start开发服务器 范例程式码 主浏览器代码 var main = require ( 'main-loop' ) var EventEmitter = require ( 'events' ) . EventEmitter var bus = new EventEmitter var emit = bus . emit . bind ( bus ) var state = { loading : false , coun
vue3之单向数据流代码
weixin_47039303的博客
11-23 146
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> </div> <script src="js/vue3.js"></script> <scri
Vue中的单向数据流
sunny_day的博客
06-01 3305
单向数据流 数据从父级组件传递给子组件，只能单向绑定。 子组件内部不能直接修改从父级传递过来的数据。 <section id="app"> <custom-component :count="count"></custom-component> </section> Vue.component("custom-component", { props: ['count'], template: ` &l..
vue中单向数据流小结
weixin_42180591的博客
01-05 388
...... <body> <div id='root'></div> <script> /* 父组件向子组件传多个参数时，可以将要传的参数置入params中，调用子组件时直接绑定v-bind="params" 等同于将参数一个一个展开传递形式 例如：v-bind='params' <=> :content ='params.content' 其余参数
Vue组件之单向数据流的解决方法
10-17
主要介绍了Vue组件之单向数据流的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解Vue 单向数据流的原理
08-28
主要介绍了深入理解Vue 单向数据流的原理，详细的介绍了Vue 单向数据流的原理和使用，具有一定的参考价值，有兴趣的可以了解一下
Vue props 单向数据流的实现
10-17
主要介绍了Vue props 单向数据流的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 组件通信/单向数据流
FellAsleep的博客
02-19 432
目录 1.组件介绍 1.全局注册使用 : 2.局部注册 2.组件-scoped作用 3.组件通信-父向子-props 4.组件通信-子向父 5.理解单项数据流 1.组件介绍 组件概念:可复用的vue实例, 封装标签, 样式, JS 什么时候封装组件:遇到重复标签, 可复用的时候 组件好处:各自独立, 互不影响 口诀: 哪部分标签复用, 就把哪部分封装到组件内 (重要): 组件内template只能有一个根标签 (重要): 组件内data必须是一个函数, 独立作用域 1.全局
单项数据流
Joker.M的博客
07-27 357
什么是单项数据流 举个小例子 父组件App.vue 给子组件绑定一个message属性传值1999 父组件App.vue中的代码： <template> <div id="app"> <Home :num="message"/> </div> </template> <script&g...
如何理解Vue中的单向数据流
星海拾遗
03-22 3940
Vue官方文档对单向数据流有着如下定义 官网中说，在子组件中直接操作props会发出警告。实例如下 let btn = Vue.component('button-counter', { data: function () { return { count: 0 } }, ...
Vue单向数据流（不要修改props）
weixin_50665010的博客
05-06 824
在使用Vue组件通信是经常会出现以下此类错误: 在vue中需要遵循单向数据流原则 所以什么是单向数据流： 向单项数据流指的是,在父传子的前提下，父组件里面的数据发生改变会带动子组件里的数据进行更新。 那么反过来对子组件里的props进行修改是否可以影响父组件里的数据进行改变呢？ 遵循单向数据流示例代码如下： 运行后：此时代码并不会报错 违背单向数据流示例代码如下： 运行后：此时代码会报错，但是会正常运行，后续会影响代码运行 特殊说明：父组件传给子组件的...
vue6 基础面试题属性传值单向数据流
duzhe17629085113的博客
12-15 215
一第一种传值 第二种单向数据传值 l###单向数据流是什么意思 数据的流向只能从父级组件传向子级组件,修改父级组件中的数据子级组件会刷新子级组件不能通过修改属性的方式去反向刷新 传属性 意思就是如果父组件传递向子组件传递的是一个对象可以修改data属性,因为那是引用数据，大家都指向那个空间所以都可以修改，父主键也可以修改 如果父主键传递的是一个数据，子组件可以修改子组件页面可以刷新，但是父组件不能再次修改了，因为数据是单向留不能通过改变属性的方式取修改刷新 传对..
Vue面试题之（二）怎样理解 Vue 的单向数据流？
Dreamer_xr的博客
09-29 2706
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 1、v-model 用在 input 元素上 v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 Vue 是单项数据流，v-model 只是语法糖而已： <i...
vue3组件之间数据传递
123
03-14 8360
1. 父传子 遵循vue的单向数据流，就是父组件能往子组件传递数据，但是子组件不能回传，父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递，子组件中定义props对象，定义需要接受的数据，在setup中的props定义 父传子类型 父组件 <template> <div>parent</div> <Child></Child> </template> <script> import Chi
什么是vue单向数据流（详解）
热门推荐
object not found的博客
08-25 2万+
上述子组件中的currentValue是实际input组件的值，他的值是根据父组件传入的值得出的，input标签组件的change事件来触发父组件的change事件，从而改变传入子组件props中value的值。这就解释了单项数据流，父組件通过props向子组件传递值，子组件通过emit事件来通知父组件修改值，子组件不在自身对父组件传递过来的props做任何修改，都是通过父组件来更新props,从而达到子组件更新自身状态。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
Vue 2.x全家桶(Vue 3.0 新特性全解析)
03-09
<p style="font-size:11pt;color:#494949;"> <strong> </strong> </p> <p style="font-size:11pt;color:#494949;"> <img src="https://img-bss.csdnimg.cn/202008030120564222.png" alt="" /> </p> <div> </div>
理解vue的单向数据流
前端精髓
04-01 1万+
单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值
vue的单向数据流
李弈圣的博客
03-18 5526
为什么是单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制...
vue中的单向数据流
li5466667的博客
05-06 5604
vue单向数据流 在vue中需要遵循单向数据流原则 在父传子的前提下，父组件的数据发生会通知子组件自动更新 子组件内部，不能直接修改父组件传递过来的props => props是只读的 代码示例 父组件代码： <template> <div style="border: 1px solid #000"> <h1>我是父组件</h1> <Son :info="info" :person="person"></So
vue3双向数据绑定
最新发布
08-05
在Vue3中，双向数据绑定的概念已经被废弃了，取而代之的是单向数据流的原则。Vue3采用了Composition API，它提供了`ref`和`reactive`这两个函数来实现数据响应式。 要实现双向绑定的效果，你可以使用`v-model`指令...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值