$parent 和 $children的用法

这篇具有很好参考价值的文章主要介绍了$parent 和 $children的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

$parent

baseSon.vue

<template>
    <div style="background-color: #999">
        <h2>儿子金钱:{{ sonMoney }}</h2>
        <button @click="giveFatherMoney(100)">给父亲100</button>
        <button @click="subFatherMoney(5)">拿走父亲5块钱</button>
    </div>
</template>
   
<script>
export default {
    name: "baseSon",
    props: ["fatherMoney"],
    data() {
        return {
            sonMoney: 200,
        };
    },
    methods: {
        //   giveFatherMoney(money) {
        //     this.$parent.fatherMoney += money;
        //     this.sonMoney -= money;
        //   },
        giveFatherMoney (money) {
            this.$parent.changeFatherMoney(money)
        },
        subFatherMoney (money) {
            this.$parent.fatherMoney -= money
        }
    },
};
</script>
   
<style></style>


App.vue
<template>
    <div class="app">
        父亲的钱:{{ fatherMoney }}
        <baseSon></baseSon>
        <baseDau></baseDau>
    </div>
</template>

<script>
import baseSon from './components/baseSon.vue';
import baseDau from './components/baseDau.vue';
export default {
    components:{
        baseSon,baseDau
    },
    data(){
        return {
            fatherMoney:10000
        }
    },
    methods:{
        changeFatherMoney(money){
            this.fatherMoney += money
        }
       
    }
}

</script>
   
<style></style>

childern 不好用,所以建议$ref

ref

App.vue

<template>
    <div class="app">
        父亲的钱:{{ fatherMoney }}
        <button @click="getSonMoney(50)">父亲拿走儿的50</button>
        <button @click="giveSonMoney(100)">父亲给儿的100</button>
        <baseSon ref="baseSonRef" ></baseSon>
        
    </div>
</template>

<script>
import baseSon from './components/baseSon.vue';

export default {
    components:{
        baseSon
    },
    data(){
        return {
            fatherMoney:10000
        }
    },
    methods:{
        changeFatherMoney(money){
            this.fatherMoney += money
        },
        getSonMoney(money){
            console.log('getSonMoney');
            
            // this.$children.sonMoney -= money
            this.$refs.baseSonRef.sonMoney -= money
            // console.log('this.$children.sonMoney', this.$children.sonMoney);
            
        },
        giveSonMoney(money){
            this.$refs.baseSonRef.changeSonMoney(money)
            // this.$children.changeSonMoney(money)
        }
    }
}

</script>
   
<style></style>

baseSon.vue文章来源地址https://www.toymoban.com/news/detail-731728.html

<template>
    <div style="background-color: #999">
        <h2>儿子金钱:{{ sonMoney }}</h2>
        <button @click="giveFatherMoney(100)">给父亲100</button>
        <button @click="subFatherMoney(5)">拿走父亲5块钱</button>
    </div>
</template>
   
<script>
export default {
    name: "baseSon",
    props: ["fatherMoney"],
    data() {
        return {
            sonMoney: 200,
        };
    },
    methods: {
        //   giveFatherMoney(money) {
        //     this.$parent.fatherMoney += money;
        //     this.sonMoney -= money;
        //   },
        giveFatherMoney(money) {
            this.$parent.changeFatherMoney(money)
        },
        subFatherMoney(money) {
            this.$parent.fatherMoney -= money
        },
        changeSonMoney(money) {
            this.sonMoney += money
        }
    },
};
</script>
   
<style></style>

到了这里,关于$parent 和 $children的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 router配置有关parent报null 的错误问题

    今天刚解决了npm  install 的问题和 vue create 构建项目的时候的问题, 之后就步入正轨学习有关的路由,无奈在使用vue create 成功构建项目后使用的 使用的vue-router 又报了新的问题:Uncaught TypeError: Cannot read properties of null (reading \\\'parent\\\') 有关的router的js文件的书写我检查了好几遍

    2024年02月07日
    浏览(28)
  • vue3探索——使用ref与$parent实现父子组件间通信

    在vue3中,可以使用vue3的API defineExpose() 函数结合 ref 或者 $parent ,实现父子组件数据的传递。 子组件:通过 defineExpose() 函数,向外暴露响应式数据或者方法 父组件:通过 ref 获取子组件实例,进而获取子组件暴露的响应式数据或方法 💡 你没看错!这里的 ref 就是经常用来定

    2024年02月10日
    浏览(40)
  • vue3 组合式api中 ref 和$parent 的使用

    ref 的使用 vue3中, 在 组件中添加一个 component ref=“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了 ref 的使用方法 vue3中ref 的特点 以上如果在vue2中,就可以使用 子组件的对象来改变子组件的

    2024年02月10日
    浏览(44)
  • Vue 子组件使用 this.$parent 无法访问到父组件数据和方法

    前言 最近在使用父子组件时候,通过this.$parent访问父组件数据和方法,出现undefined的情况。 实际场景是父组件有一个dialog弹出框,包含几个子组件form表单,根据标识只展示一个子组件。 在子组件需要传递一个ID给父组件中的data数据,想到this.$parent(比较简便),不想用this.$

    2024年02月11日
    浏览(46)
  • 【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs

    免费,开源 插件多 可自定义 【推】 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧 相比之下,我还是强烈推荐 【Xgplayer ——点我进入】 备用地址 http://t.csdn.cn/H0cAV Xgplayer 优点 优雅、美观 文档清晰明了 大厂出

    2024年02月03日
    浏览(57)
  • .eslintrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json c

    在给vue3项目添加eslint的时候,安装完依赖,并且在package.json中的scripts配置了eslint检测的命令之后执行检测命令,发生如下报错: 按照报错,打算把根目录下的.eslintrc.js改为.eslintrc.cjs,改完之后确实能够执行了,但是.eslintrc.cjs文件一直显示报错,官方有建议几种文件的格式

    2024年02月12日
    浏览(44)
  • vue 启动项目报错:TypeError: Cannot set property ‘parent‘ of undefined异常解决

    场景:从git上面拉下来一个项目 npm i 下载完依赖以后 npm run serve 去运行项目的时候 报错TypeError: Cannot set property ‘parent’ of undefined 如图所示 原因:首先排查发现判断得出是less解析失败导致 但是经过长时间的查询解决方案发现是因为vue版本在下载包的过程中由2.6.10升级为2

    2024年02月12日
    浏览(55)
  • [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..

     错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop\\\'s value. Prop being mutated: \\\"value\\\". 译文:[Vue警告]:避免直接改变prop,因为每当父组件重新呈现时,该值将被覆盖。相反,应该使用基于

    2024年02月12日
    浏览(44)
  • [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c

    报错翻译:避免直接更改一个prop,因为每当父组件重新渲染时,该值都会被覆盖。相反,应使用基于prop值的数据或计算属性。正在更改的prop:“activeId” 解决办法,使用基于prop的值,即把名为activeId的prop的值放在另一个变量中,对那个变量进行修改,不修改activeId。 1、实

    2024年02月03日
    浏览(50)
  • JS数组函数 reduce() 的用法—包含基础、进阶、高阶用法

    目录 一、语法剖析 二、实例讲解 1. 求数组项之和 2. 求数组项最大值 3. 数组去重 三、其他相关方法 1. reduceRight() 2. forEach()、map()、every()、some()和filter() 四、重点总结 先看w3c语法 ✔ 常见用法 数组求和 数组最大值 ✔ 进阶用法 数组对象中的用法  求字符串中字母出现的次数

    2024年01月20日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包