欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

组件间的传值

程序员文章站 2022-03-26 19:45:25
父组件给子组件传值 // 父
// 子 在 ......

父组件给子组件传值

// 父
<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) }

组件间的传值  


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