组件间的传值

父组件给子组件传值

// 父
<div id = "app">
<my-content></my-content>
</div>

// 子
<template id="content">
<div class="content">
这里是内容区域--- {{ msg }}
</div>
</template>


在父组件调用子组件的地方,给它添加一个自定义的属性 test, 属性的值为 测试

> <my-content test = "测试" ></my-content>

在子组件定义的地方,添加一个选项 props, 值为数组, 数组元素为之前自定义的属性 test


const MyContent = {
props: ['test'],
template: "#content"
}

接下来就可以在子组件中通过 {{ test }}或者其他的vue的用法使用这个值

>1.父组件在调用子组件的地方,添加一个自定义的属性,属性的值为你需要传递给子组件的值,
>2. 在子组件定义的地方,添加了一个props选项,它的值是一个由自定义属性组合而成的数组,
>3. 在子组件的模板中,通过自定的属性名就可以获取到父组件传递过来的值

 拓展:假如父组件给子组件传的值是子组件不想要的呢? --- 子组件需要验证数据的类型,这一步是项目中常用的


 props: {
 test: String
 }

 拓展: 如果你需要的传递的值是一个变量,需要使用到绑定属性

 <my-content :test = "msg" ></my-content>


>1.父组件在调用子组件的地方,添加一个自定义的属性,属性的值为你需要传递给子组件的值,如果需要传递的值是变量,那么需要使用到绑定属性
> 2.在子组件定义的地方,添加了一个props选项,它的值是一个由自定义属性组合而成的数组或者是一个对象,如果需要数据类型的校验,则使用对象,否则可以使用数组,
> 3.在子组件的模板中,通过自定的属性名就可以获取到父组件传递过来的值

子组件给父组件传值

水往地处流,如果向往高处流,就需要付出代价

> 子组件中,通过某一个事件,执行 this.$emit('**自定义的事件**', '需要传递的值'),

sendData () {
console.log('给父组件传值')
this.$emit('my-event-test', '11223344')
}


> 在父组件调用子组件的地方,给它 绑定了 子组件中 **自定义的事件**,事件的实现由父组件实现,注意绑定事件中不要添加(),

<my-content @my-event-test = "getData"></my-content>

> 在父组件中实现时添加 参数,参数就是传递过来的值

getData (val) {
console.log(val) }

3277e14620c23f0d8b7390054f8ea796.png  


子组件中,通过某一个事件,执行 this.$emit('**自定义的事件**', '需要传递的值'),在父组件调用子组件的地方,给它 绑定了 子组件中 **自定义的事件**,事件的实现由父组件实现,注意绑定事件中不要添加(),在父组件中实现时添加 参数,参数就是传递过来的值

posted @ 2020-04-04 16:25  苏格拉没有底xxf  阅读(109)  评论(0编辑  收藏