Vue中父组件与子组件之间的通信

prop 父组件向子组件传递数据, 单向绑定

$refs 父组件调用子组件里的属性和方法

$emit 子组件向父组件传递消息

新建项目

$ vue create demo
$ cd demo
$ npm run serve

1、父组件引用子组件

components/Child.vue

<template>

<h2>子组件</h2>
</template>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 3、使用子组件 -->
<Child></Child>

</div>
</template>

<script>
// 1、导入子组件
import Child from "@/components/Child.vue";

export default {
name: "app",

// 2、注册组件
components: {
Child // 键名与变量名相同, 等价于 Child: Child
}
};
</script>

2、父组件给子组件传值

components/Child.vue

<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
</div>
</template>

<script>
export default {
name: "child",

// 子组件属性,用于接收父组件数据, props是单向绑定
props:[
"message"
]
}
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 父组件通过属性给子组件传值 -->

<!-- 静态绑定-->
<Child message="hello"></Child>

<!-- 动态绑定 -->
<Child v-bind:message="message"></Child>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

data() {
return {
message: "hello child"
};
},

components: {
Child
}
};
</script>

3、父组件操作子组件数据,方法

components/Child.vue

<template>
<div>
<h2>子组件</h2>

<p>{{message}}</p>

</div>
</template>

<script>
export default {
name: "child",

// 子组件属性
data(){
return {
message: "",
}
},

// 子组件方法
methods:{
setMessage(msg){
this.message = msg;
}
}
}
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 注册子组件引用信息 -->
<Child ref="child"></Child>

<button @click="setChildMessage">修改子组件数据</button>

<button @click="callChildMessage">调用子组件方法</button>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

components: {
Child
},

methods: {
setChildMessage() {
this.$refs.child.message = "设置子组件属性"
},

callChildMessage(){
this.$refs.child.setMessage("调用子组件方法");
}
}
};
</script>

$refs 不是响应式的,只在组件渲染完成后才填充

4、子组件给父组件传值

components/Child.vue

<template>
<div>
<h2>子组件</h2>

<!-- 点击按钮将会给父组件传值 -->
<button @click="clickButton">子组件按钮</button>

</div>
</template>

<script>
export default {
name: "child",

methods: {
clickButton() {
// 向父组件发送信号 vm.$emit(event, args)
this.$emit("clickButton", "子组件的按钮被点击");
}
}
};
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 处理子组件的按钮点击事件 -->
<Child @clickButton="childClickButton"></Child>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

components: {
Child
},

methods: {
// 接收处理子组件传递过来的数据
childClickButton(message) {
console.log(message);
}
}
};
</script>

参考

  1. vue之父子组件间通信实例讲解(props、$ref</code>、<code>$emit)
  2. 【vue组件之间互相传值:父传子,子传父】
            </div>

prop 父组件向子组件传递数据, 单向绑定

$refs 父组件调用子组件里的属性和方法

$emit 子组件向父组件传递消息

新建项目

$ vue create demo
$ cd demo
$ npm run serve

1、父组件引用子组件

components/Child.vue

<template>

<h2>子组件</h2>
</template>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 3、使用子组件 -->
<Child></Child>

</div>
</template>

<script>
// 1、导入子组件
import Child from "@/components/Child.vue";

export default {
name: "app",

// 2、注册组件
components: {
Child // 键名与变量名相同, 等价于 Child: Child
}
};
</script>

2、父组件给子组件传值

components/Child.vue

<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
</div>
</template>

<script>
export default {
name: "child",

// 子组件属性,用于接收父组件数据, props是单向绑定
props:[
"message"
]
}
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 父组件通过属性给子组件传值 -->

<!-- 静态绑定-->
<Child message="hello"></Child>

<!-- 动态绑定 -->
<Child v-bind:message="message"></Child>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

data() {
return {
message: "hello child"
};
},

components: {
Child
}
};
</script>

3、父组件操作子组件数据,方法

components/Child.vue

<template>
<div>
<h2>子组件</h2>

<p>{{message}}</p>

</div>
</template>

<script>
export default {
name: "child",

// 子组件属性
data(){
return {
message: "",
}
},

// 子组件方法
methods:{
setMessage(msg){
this.message = msg;
}
}
}
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 注册子组件引用信息 -->
<Child ref="child"></Child>

<button @click="setChildMessage">修改子组件数据</button>

<button @click="callChildMessage">调用子组件方法</button>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

components: {
Child
},

methods: {
setChildMessage() {
this.$refs.child.message = "设置子组件属性"
},

callChildMessage(){
this.$refs.child.setMessage("调用子组件方法");
}
}
};
</script>

$refs 不是响应式的,只在组件渲染完成后才填充

4、子组件给父组件传值

components/Child.vue

<template>
<div>
<h2>子组件</h2>

<!-- 点击按钮将会给父组件传值 -->
<button @click="clickButton">子组件按钮</button>

</div>
</template>

<script>
export default {
name: "child",

methods: {
clickButton() {
// 向父组件发送信号 vm.$emit(event, args)
this.$emit("clickButton", "子组件的按钮被点击");
}
}
};
</script>

App.vue

<template>
<div id="app">
<h2>父组件</h2>

<!-- 处理子组件的按钮点击事件 -->
<Child @clickButton="childClickButton"></Child>

</div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
name: "app",

components: {
Child
},

methods: {
// 接收处理子组件传递过来的数据
childClickButton(message) {
console.log(message);
}
}
};
</script>

参考

  1. vue之父子组件间通信实例讲解(props、$ref</code>、<code>$emit)
  2. 【vue组件之间互相传值:父传子,子传父】