vue的单向数据流

责编:menVScode 2017-11-14 22:08 阅读(933)

单向数据流

        数据从父组件流向(传递)给子组件,只能单向绑定。

        在子组件内不应该修改父组件传递过来的数据。

        改变prop的情况:1、作为data中局部数据的初始值使用;2、作为子组件中的computed树属性。


例子:

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h3>父组件中使用了count</h3>
			<p>{{count}}</p>
			<custom-component :count="count" @increment-click="countHandle"></custom-component>
		</div>
		<script>
			//全局组件
			Vue.component('custom-component',{
				props:['count'],
				data(){
					return {
						incrementCount:this.count  //作为局部这个组件的data的初始值
					}
				},
				computed:{
					incrementCount2(){
						return this.incrementCount
					}
				},
				template:`
					<div>
						<h2>我是一个自定义的组件</h2>
						<input type="button" value="改变count的值" @click="changeCount" />
						{{incrementCount2}}
					</div>
				`,
				methods:{
					changeCount(){
						this.incrementCount++;
						//通知父组件 发生了改变
						this.$emit("increment-click")	
					}
				}
			})

			new Vue({
				el:"#app",
				data:{
					count:0
				},
				methods:{
					countHandle(){
						//alert("子组件点击了");
						this.count++;
					}
				}
			})
		</script>
	</body>
</html>

效果展示

GIF

标签: 数据流 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码