Vue父组件调用子组件事件，父子组件交互

vue2

vue父组件向子组件传递数据 or 调用事件

父组件传递数据到子组件 `props`

传递：

<child-c :args="args"></child-c>


export default {data: {return() {args: {id: 1,name: 'achuan',}}}
}

接收：

props: {// 可选，并提供默认值title: {type: String,required: false,default: '默认标题'},// 对象或数组areg: {type: Object,default() {return {}}},// 默认可选，单类型index: Number,// 添加一些自定义校验userName: {type: String,// 在这里校验用户名必须至少3个字validator: v => v.length >= 3},// 默认可选，但允许多种类型uid: [ Number, String ]
}

父组件调用子组件方法：

调用事件

方法1：

<child-c ref="child" @click="onChildFn"></child-c>export default {components: {childC: childC}methods: {onChildFn() {this.$refs.child.callMethod()},},
}

方法2：

父组件：

this.$refs.child.$emit('childFn')

子组件：

export default {mounted() {this.$nextTick(function () {this.$on('childFn', function () {// ...})})}，
}

子组件调用父组件方法：

子组件：

<li ref="child" @click="onParentFn"></li>

onParentFn() {this.$emit('onParentFn')
}

父组件：

<child-c ref="child" @onParentFn="parentFn"></child-c>

parentFn() {// ...
}

兄弟组件通信

bus

vue3

父组件获取子组件数据：

获取子组件数据

<UploadImg ref="uploadRedList"></UploadImg>

const uploadRedList = ref(null) // 通过 ref 绑定子组件
let mediaListTemp = uploadRedList.value.mediaList
let acceptTemp = uploadRedList.value.accept // images/videoreturn {uploadRedList,
}

父组件传递数据到子组件

传递：

<child-c :args="args"></child-c>


export default {data: {return() {args: {id: 1,name: 'achuan',}}}
}

接收：

props: {// 可选，并提供默认值title: {type: String,required: false,default: '默认标题'},// 对象或数组args: {type: Object,default() {return {}}},// 默认可选，单类型index: Number,// 添加一些自定义校验userName: {type: String,// 在这里校验用户名必须至少3个字validator: v => v.length >= 3},// 默认可选，但允许多种类型uid: [ Number, String ]
}setup (props) {// 该入参包含了我们定义的所有propsconsole.log(props);console.log(props);let { args } = toRefs(props)console.log(args.value)// orlet argsTemp = ref(props.args)
}

父组件调用子组件方法：

调用方法

const uploadRedList = ref(null) // 通过 ref 绑定子组件
uploadRedList.value.childFn()return {uploadRedList,
}

子组件调用父组件方法：

子组件：

<li ref="child" @click="onParentFn"></li>

onParentFn() {this.$emit('onParentFn')
}

父组件：

<child-c ref="child" @onParentFn="parentFn"></child-c>

parentFn() {// ...
}

兄弟组件通信

安装：

npm install --save mitt

bus.js文件

import mitt from 'mitt';
export default mitt();

发起：

setup () {// 调用打招呼事件，传入消息内容bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}

接收，销毁：

setup () {// 定义一个打招呼的方法const sayHi = (msg) => {console.log(msg);}// 启用监听bus.on('sayHi', sayHi);// 在组件卸载之前移除监听onBeforeUnmount( () => {bus.off('sayHi', sayHi);})
}

vue父组件、子组件，父子组件交互相关推荐

父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent><child :child-msg="msg"& ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
vue父传子mounted问题
vue父传子mounted问题问题描述: 场景是父组件向子组件传递参数,子组件在父组件的dialog里面,子组件是在mounted的时候渲染父组件传递的参数,出现bug,子组件mounted只加载一 ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template><div id="app"><input type="button&q ...
vue父与子组件，子与子组件间的方法调用和通信
子与子之间通信的前提是有一个共同的父亲, 首先,在vue中,$+name是vue系统定义的实例属性或方法,vue的api上面写的有链接实例属性. $parent指的是当前组件的父实例.$refs指的是 ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...

vue父组件、子组件，父子组件交互

Vue父组件调用子组件事件，父子组件交互

vue2

父组件传递数据到子组件 `props`

父组件调用子组件方法：

子组件调用父组件方法：

兄弟组件通信

vue3

父组件获取子组件数据：

父组件传递数据到子组件

父组件调用子组件方法：

子组件调用父组件方法：

兄弟组件通信

vue父组件、子组件，父子组件交互相关推荐

最新文章

热门文章

vue父组件、子组件，父子组件交互

Vue父组件调用子组件事件，父子组件交互

vue2

父组件传递数据到子组件 props

父组件调用子组件方法：

子组件调用父组件方法：

兄弟组件通信

vue3

父组件获取子组件数据：

父组件传递数据到子组件

父组件调用子组件方法：

子组件调用父组件方法：

兄弟组件通信

vue父组件、子组件，父子组件交互相关推荐

最新文章

热门文章

父组件传递数据到子组件 `props`