vue传值特辑

给父组件传值

首先创建一个button绑定一个click事件

<button @click="sendnum">给父组件传值</button>

在methods中定义事件

sendnum(){
				console.log('给父组件传值')
				this.$emit('myEvent',this.num)
			}

		data(){
			return{
				num:3,
			};
		},

这里是使用了$emit调用了myEvent事件，并附带传过去一个this.num

父组件中

<test v-if="foud" :title="title" @myEvent='getNumber'>这是一个test组件</test>

注册这个事件 将myEvent给一个getNumber

在methods里定义一个getNumber

getNumber(num){
				console.log(num)
				this.num = num
			},

		data() {
			return {
				imgArr:[],
				title: '你好',
				foud:true,
				num:0
			}
		},

data里定义一个num，将形参接受到的数据（子组件里的this.num）替换给这个data里的num

<view v-model="num">渲染父组件传来的数据{{num}}</view>
<button @click="fouding">销毁test</button>

这里的v-model做了双向绑定

绑定一个click事件，取否

fouding(){
				this.foud = !this.foud
			},

确保在取否的同时子组件的值传来

由父组件向子组件传值

<test v-if="foud" :title="title" @myEvent='getNumber'>这是一个test组件</test>

定义一个test

import test from '../../compoments/test.vue'

从父组件引入这个test

将需要传输的值在data里定义，即上文的title: ‘你好’

		components:{
			test //键和值一样，不用使用test：test
		}

这里是注册完了能在元素里适用

:title="title"

test元素中，适用v-bind绑定title组件，使得这个值能够传过去

紧接着在test.vue中，定义一个和data同级的变量（？）来接受值