Vue学习笔记4.2 父子组件传递

快来打我* 2022-03-24 15:20 234阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>父子组件传递</title>
    	<meta charset="utf-8">
    	<script src="vue.js"></script>
    </head>
    <body>
    	
    	<div id="app">
    		
    		<counter :content = "0" @change="handleChangeClick"></counter>
    		<counter :content="1" @change="handleChangeClick"></counter>
    		<div>{
       {total}}</div>
    	</div>
    </body>
    <script>
    	// 子组件
    	var counter = {
    		// 子组件接收父组件的数据时需要加上props：[]
    		props: ['content'],
    		// 子组件使用data函数时需要用函数返回 而不是像根组件那样直接写名称与值
    		// Vue是单向数据流。所以父组件可以向子组件任意传数据，但是子组件不能随便修改父组件的数据。
    		// 所以需要使用data函数来创建父组件数据的副本。
    		data: function() {
    			return {
    				number: this.content
    			}
    		},
    		// 通过点击事件触发handleClick函数
    		template: '<div @click="handleClick">{
       {number}}</div>',
    		methods: {
    			handleClick: function() {
    				this.number ++
    				// 子组件向父组件传递数据需要使用$emit()函数。函数的第一个参数是索要触发事件的名称，后面的都是索要传递的值
    				// 可以1个也可以多个值
    				this.$emit('change', 1, 2)
    			}
    		}
    	}
    
    	var vm = new Vue({
    		el:'#app',
    		data: {
    			total: 1
    		},
    		// 父组件添加子组件
    		components: {
    			counter: counter
    		},
    		methods: {
    			// 父组件接收子组件传递的数据在step中,几个参数传递，这里形参就设置几个
    			handleChangeClick: function(step, step2) {
    				this.total += step
    				console.log(step2)
    			}
    		}
    	})
    </script>
    </html>