Loading [MathJax]/jax/output/HTML-CSS/jax.js

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

简介: 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 style="font-family:monospace;font-size:inherit;background-color:rgba( 0 , 0 , 0 , 0.06 );padding:0px 2px;border:1px solid rgba( 0 , 0 , 0 , 0.08 );border-radius:2px;line-height:inherit;text-indent:0px">$emit)
  2. 【vue组件之间互相传值:父传子,子传父】
            </div>
AI 代码解读
目录
相关文章
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
1862 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
浅谈Vue中的12种组件通信方式及理解
个人认为Vue中组件通信思想与React一致,都是单向数据流,高阶流向低阶(父传子),子组件只可通知父组件,此时数据还是在父级变更而不是发生流动。
Vue基于attrslisteners实现隔代通信
Vue基于attrslisteners实现隔代通信
71 0
Vue基于$attrs及$listeners实现隔代通信
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
194 0
Vue父子组件传值(porvide+inject实现组件通信)
vue父子组件及非父子组件通信
vue父子组件及非父子组件通信
124 0
CDN方式使用Vue组件通信
CDN方式使用Vue组件通信
184 0
Vue黑科技之组件万能通信方法
Vue黑科技之组件万能通信方法
151 0
【Vue 组件化开发 三】父组件给子组件传递数据、组件通信(父传子、子传父)、父访问子(children、ref)、动态组件(is、component)
本章学习父组件给子组件传递数据、组件通信(父传子、子传父)、父访问子(children、ref)、动态组件(is、component)。
209 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
150 0
基于springboot+mybatisplus+vue的课程学分管理系统