当前位置：首页 > news >正文

vue中父组件向子组件传值，子组件向父组件传值，简洁易懂

news 来源：原创 2024/9/21 2:36:15

Vue中父组件传值到子组件

Vue中父组件传值分为两步：
一、父组件中代码中，使用属性绑定向子组件传递数据，
如图, 其中，:titles="title"就是在将父组件的title属性值，传递到子组件所绑定的titles属性中，这时候，子组件就有了一个带有值的titles属性了

<template><div class="parent"><h1>我是父组件</h1><childVue :titles="title" :contents="content"></childVue></div>
</template><script>
import childVue from './child.vue'
export default {name: 'parant',components:{childVue},data() {return {content: "我是父组件传过来的内容"};}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.parent{width: 500px;height: 500px;background: rgb(146, 133, 133);}
</style>

二、子组件需要接收传过来的属性值
如下代码，子组件需要使用props属性去接受刚刚父组件传递过来的属性titles和contents，需要定义一下属性类型哦

<template><div class="child"><h2>我是子组件</h2><h4>{{titles}}</h4><h4>{{contents}}</h4></div>
</template><script>
export default {name: 'helloChild',props: {titles: String,contents: String}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child{width: 400px;height: 300px;background: rgb(157, 117, 117);
}
</style>

总结一下：

父组件中引入子组件、注册子组件，tempalte中使用子组件； import 、components、
子组件： props中创建一个属性，接受父组件传的值；
在template中使用 {{contents}}；
父组件中的，：title与子组件中prop添加的属性名称要一致；
=”title“与父组件中data数据中的title名称要一致；

props绑定的写法也可以写成这样的形式

 props: {title: {type: String,  // [String, Number],default: 1}}

Vue中子组件传值到父组件

子组件传值到父组件也有两步。
一：子组件通过$emit触发一个自定义事件，传递属性出去
如下，通过按钮（也可以其它方式，能触发$emit即可），触发$emit方法，传递datas的值出去

<template><div><h1>children</h1><button @click="sendTOParent">向父组件传值</button></div>
</template>>
<script>
export default {data() {return {datas: "子组件中的信息"};},methods:{sendTOParent(){this.$emit('listenToChildEvent',this.data)}}
};
</script>>

2.在父组件中引用子组件的标签中，使用v-on监听该自定义事件并添加一个响应该事件的处理方法

<template><div><h1>我是父组件</h1><children v-on:listenToChildEvent = 'showMsgfromChild'></children></div>
</template>>
<script>
import Children from "./Children";
export default {data() {return {};},methods:{showMsgfromChild(data){console.log(data)}},components: {Children},
};
</script>

总结：
子组件通过$emit传递参数出去，在父组件中引用子组件的标签中，使用v-on监听该自定义事件并添加一个响应该事件的处理方法