vue 组件之间传值 - 好文

vue组件间传值分为父组件给子组件传值和子组件给父组件传值

一、父组件给子组件传值

父组件中引入子组件，
父组件的js里定义要传递的属性值，下面的写法是动态的传递，name可以通过定义方法，在方法里动态修改，如不需要动态的传递，则直接使用属性定义值

parent.vue

<template> <child v-bind:name="name"></child> </template> <script> import
child from "./child.vue" export default { components: {child}, data(){ return
{name:"张三"} } } </script>

子组件定义props接收父组件传递的值，如下：

child.vue

<template> <div>{{name}}</div> </template> <script> export default {
props:["name"] } </script>二、子组件给父组件传值

首先在父组件中引入子组件，定义一个方法接收子组件传递的值，如果只需要知道子组件完成某项操作，可以不传值，只定义方法，如下（子组件给父组件传值）：

parent.vue

<template> <child @childToParent="child"></child> </template> <script> import
child from "./child.vue" export default { components: {child}, methods:{
child(data){ console.log(data); } } } </script>在子组件中定义一个方法，传值给父组件，如下：

child.vue

<template> <button @click="childClick">点击</button> </template> <script> export
default { methods:{ childClick(){ this.$emit("childToParent","I am child."); }
} } </script>
三、父组件调用子组件方法

先在子组件里定义好方法，在父组件里引入子组件后，在使用子组件时，绑定一个ref，这样就可以实现父组件调用子组件的方法

parent.vue

<template> <child ref="child"></child> <button @click="click">click</button>
</template> <script> import child from "./child.vue" export default {
components: {child}, methods:{ click(){ this.$refs.child.init(); } } } </script>

child.vue

<template> <p>{{name}}</p> </template> <script> export default { data(){
return { name:'' } } methods:{ init(){ this.name="jack"; } } } </script>

热门工具换一换