vue.js之定义组件和子父组件数据传递及函数的相互调用

╰+哭是因爲堅強的太久メ 2022-05-14 11:13 16阅读 0赞

import Vue from 'vue'
    
    // 定义一个名称为componentOne的组件
    const componentOne = {
        // props 用来接收父项所传递过来的数据，该数据是挂载在本组件上，可以直接用this.调用
        props: {
            active: {
                type: Boolean, // 定义父项传递数据的类型
                require: true // 是否为必传项,默认为false
            },
            propsOne: String
        },
        template: `
            <div>
                <span v-show="active" v-model="val">see me is active?</span> <span @click="handleChange">{ {propsOne}}</span> </div> `, data () { return { val: '123' } }, methods: { handleChange () { // 子项调用父项的方法，第一个参数是调用父项的方法名，后面的参数是父项方法所需的参数 this.$emit('changeParentVal', '111') }, changeChildVal(parm) { this.val = parm } } } new Vue({ // 接收所需要的子项组件 components: { ComOne: componentOne }, el: "#id", template: ` <div> <com-one :active="false" :prop-one="val1" ref="oneCom"><com-one> <span @click="changeChildVal"></span> </div> `, data: { val1: '123' }, methods: { changeParentVal(parm) { this.val1 = '456' console.log(parm) }, changeChildVal () { // 通过$refs找到指定的子项组件，并主动调用子项组件的方法 this.$refs.oneCom.changeChildVal('312') } } })

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 React父组件调用子组件中的函数

第一步在父组件中写下面代码 onRef = (ref) => { this.child = ref }; 第二步将此方法传个子...

ゞ浴缸里的玫瑰/ 2024年04月18日 06:36/ 0 赞/ 109 阅读

相关父组件向子组件传递数据

既然存在父子关系，所以，肯定是在父组件中调用了子组件。而父组件向子组件传递的数据，可以通过在子组件上定义属性，将数据传递给自定义属性的值的方式，来实现父组件向子组件传递数据

太过爱你忘了你带给我的痛/ 2023年08月17日 17:09/ 0 赞/ 197 阅读

相关 VUE父组件向子组件传递数据

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组

秒速五厘米/ 2023年03月02日 15:57/ 0 赞/ 68 阅读

相关 [vue]子组件通过$emit调用父组件的方法以及传递数据给父组件

2019-05-10 \[vue\]子组件通过$emit调用父组件的方法以及传递数据给父组件原理也很简单，子组件使用$emit来触发父组件的函数，子组件借助这个

￡神魔★判官ぃ/ 2022年10月26日 11:29/ 0 赞/ 285 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 349 阅读

相关 vue.js之定义组件和子父组件数据传递及函数的相互调用

import Vue from 'vue' // 定义一个名称为componentOne的组件 const componentOne = {

╰+哭是因爲堅強的太久メ/ 2022年05月14日 11:13/ 0 赞/ 17 阅读

相关 Vue父组件与子组件传递事件/调用事件

[转载文章出处][Link 1] Vue父组件与子组件传递事件/调用事件 1、Vue父组件向子组件传递事件/调用事件 <div id="app">

不念不忘少年蓝@/ 2022年04月25日 04:40/ 0 赞/ 386 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 637 阅读

相关 vue 父组件调用子组件的函数

用法：子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解：父组件里面调用子组件的函数

朴灿烈づ我的快乐病毒、/ 2021年12月10日 14:37/ 0 赞/ 383 阅读

相关 react 子组件传递数据给父组件

第一种: 通过定义函数实现 1、父组件设置含有this.setState({...})的方法,形参为接收子组件的变量 2、将方法作为参数传

清疚/ 2021年07月24日 15:08/ 0 赞/ 631 阅读