单向数据流

最新推荐文章于 2024-05-30 17:18:04 发布

qq_42164670

最新推荐文章于 2024-05-30 17:18:04 发布

阅读量308

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42164670/article/details/88934268

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

单向数据流

数据从父组件流向（传递）子组件，只能单向绑定，在子组件内不应该修改父组件传递过来的数据。
改变prop的情况：
1.作为data中局部数据的初始值使用；
2.作为子组件中的computed属性；

<body>
		<div id="app">
			<h3>父组件用了count</h3>
			<p>{{count}}</p>
			<custom-component :count="count" @increment-click="countHandle"></custom-component>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//全局组件
			Vue.component("custom-component",{
				props:["count"],
				data(){
					return {
						incrementCount:this.count//将父组件传过来的值作为局部数据的初始值就可以间接对齐进行更改
					}
				},
				template:`
					<div>
						<h2>我是一个自定义组件</h2>
						<input type="button" value="改变count的值" @click="changeCount"/>
						{{incrementCount}}
					</div>
				`,
				methods:{
					changeCount(){
						this.incrementCount++;
						//通知父组件我这里发生改变，触发自定义事件
						this.$emit("increment-click")
					}
				}
			})
			new Vue({
				el:"#app",
				data:{
					count:0
				},
				methods:{
					countHandle(){
						this.count++;
					}
				}
			})
		</script>
	</body>

qq_42164670

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单向数据流

单向数据流数据从父组件流向（传递）子组件，只能单向绑定，在子组件内不应该修改父组件传递过来的数据。改变prop的情况：1.作为data中局部数据的初始值使用；2.作为子组件中的computed属性；<body> <div id="app"> <h3>父组件用了count</h3> <p>{{count}}<...
复制链接

扫一扫