vue：父子组件通信

页面增加展示文字

1、进入demo-project项目的src\components目录下新建views目录，并新建First.vue文件

2、进入router目录下的index.js并配置路由路径：

3、编辑First.vue文件内容：
注意：
(1)template 写 html，script写 js，style写样式；
(2)一个组件下只能有一个的div；
(3)数据要写在return里。

4、在浏览器地址栏输入：http://localhost:8080/#/first

父子组件通信

1、在components目录下新建sub文件夹，用于存放子组件。
2、在sub文件夹下新建Confirm.vue组件，并在父组件First.vue中引入子组件Confirm.vue：
在script中引入
在script的name代码块后引入
在template中使用

3、编辑Confirm.vue文件：

<template><div class="confirm-button"><button @click="getButtonClick">{{text || '确认'}}}</button></div></template><script>
export default {name: 'Confirm',props: ['text'],data () {return {msg: true}},methods: {getButtonClick () {this.$emit('message', this.msg)}}
}
</script><style scoped></style>

4、编辑父组件First.vue，与子组件通信：

<template><div class="first-app">{{msg}}<confirm text="注册" @message="getMessage"></confirm></div>
</template><script>
import Confirm from '../sub/Confirm'
export default {name: 'First',components: {Confirm},data () {return {msg: 'Welcome to FirstApp'}},methods: {getMessage (val) {alert(val)}}
}
</script><style scoped></style>

5、看点击效果：

vue：父子组件通信相关推荐

vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue父子组件通信之随机数小练习
目录 vue父子组件通信的理解父组件代码: 子组件代码: 效果图: vue父子组件通信的理解 1.Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据. 2.props ...
vue父子组件通信方法
vue父子组件通信方法 1.父组件向子组件传值,通过自定义属性的方法: 父组件: <child :inputName="name"> 子组件: (1)props: {i ...
Vue父子组件通信和插槽
Vue父子组件通信父子组件通信和双向绑定 -如果使用v-model进行双向绑定时,当绑定在组件的props中的数据时,虽然可以完成双向绑定,但会出现警告:因此我们在进行组件双向绑定时,不能直接绑定给 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
vue父子组件通信，兄弟组件通信
目录一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
【day 08】vue父子组件通信
props实现父子组件通信 Song.vue Singer.vue ==>父组件 SectionList.vue ==>子组件 SectionList 需要标题+列表数据爸爸传什么数据 ...
vue 父子组件通信
文章目录大家好,我是夏小花下面是关于vue中父子组件通信案例,首先是父组件向子组件传递数据,然后子组件向父组件进行传递数据,代码中有序号标注的步骤,以及我画的一张逻辑图,结合代码去理解通信原理以及 ...
vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
Vue父子组件通信的三种方式 props、@eventName、$on
前言 vue 开发中,免不了会用到父子组件的通信,比如调用父类组件的方法或者变量:再比如父组件调用子组件的方法:父子组件相互传递数据等,本文主要通过讲解三种方式(props.evnetName.ev ...

vue：父子组件通信

页面增加展示文字

父子组件通信

vue：父子组件通信相关推荐

最新文章

热门文章