首页 > 其他分享 >Vue 组件传值方法5,利用$parent和$Children

Vue 组件传值方法5,利用$parent和$Children

时间:2023-02-14 15:38:08浏览次数:34  
标签:Vue name parent App vm 组件 position Children 传值


实现思想:
利用每个组件的属性来传值,即每个组件都有Vue 组件传值方法5,利用$parent和$Children_vue.jsChildren等属性,根据这些属性找到要找的组件,对其进行操作,
比如Vue实例vm的父级没有,子组件在这里有App和App下的Son,这些都是vm的属性中报错,换句话说vm下面的每一行代码都能在vm的某个属性中找到,对其进行更改,
便可达到从父组件向子组件传值的效果,换言之,从子组件向父组件‘传值’也可以这样。
理论上来说这种方式可以实现任意组件之间‘传值’,只要通过某种关系找到某组件,就可以对其进行任何操作,包括传值

let Son = {
template:`<div>
{{ name }} {{ position }}<button @click="ChangeName">Change Parent Name</button>
</div>`,
data(){
return{
name:'Son',
position:'son'
}
},
methods:{
ChangeName(){
this.$parent.name = 'Have Change';//设置父级的name为xxx
}
}
};
let App = {
template: `<div id="app">
{{ name }}
{{ position }}
<button @click="send">Pass Value</button>
<hr><Son/>
</div>`,
data(){
return{
name:"App",
age:21,
position:'parent',
message:'From App'
}
},
components:{
Son
},
methods:{
send(){
this.$children[0].name = "change";//设置它的第一个子元素,即子组件的name为 xxx
}
}
};


标签:Vue,name,parent,App,vm,组件,position,Children,传值
From: https://blog.51cto.com/u_15964288/6056959

相关文章

  • Vue组件传值方法4利用provide和inject
    父组件中设置provide可以设置多个属性,在它的子组件中设置inject接收父组件:provide:{for:'AppPassValue',}子组件:data(){return{......
  • drf的总结与前端vue框架了解
    drf的总结与前端vue框架了解一、drf知识点整合1、drf入门及规范#1drf入门规范-前后端分离模式-前后端混合-postman-restful规范-drf:django......
  • 高德地图手动实现轨迹,vue
    预览效果1、高德地图的官网使用的是web端,jsapi;https://lbs.amap.com/api/jsapi-v2/summary2、准备https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare注册账号—......
  • vuecli实现仿写饿了么
    ​​点击github获取代码​​仿写饿了么是一个不错的用来锻炼vue的方式,我仿写的饿了么还是比较浅显的,没有使用饿了么提供的api,数据就是自己手写的几条json用json-server打开,......
  • 1 drf回顾 、2 前端发展历史、 3 vue介绍
    目录1drf回顾2前端发展历史3vue介绍1drf回顾#1drf入门规范 -前后端分离模式-前后端混合-postman-restful规范-drf:django的app#2序列化类......
  • Vue项目在ie浏览器中显示空白的兼容性问题解决
    问题:在ie浏览器中页面报错:SCRIPT5022:SecurityError小编也不知道原因是什么,小编是尝试了以下几种方式才显示出来,这里建议大家试试看。1、下载软件包:@babel/polyfill执......
  • nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包
    一、前言不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍......
  • vue-day02——插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列
    目录昨日回顾今日内容1插值语法1.1mvvm演示1.1插值语法2文本指令3属性指令4事件指令5class和style6条件渲染7列表渲染补充:作业昨日回顾#1put,post提交的jso......
  • Vue 01
    VueVue的发展史:Vue(发音为/vjuː/,类似view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模......
  • 直播带货源码,vue中点击按钮平滑滚动到页面某个div位置
    直播带货源码,vue中点击按钮平滑滚动到页面某个div位置    goAnchorParent(selector){//参数selector是id选择器(例如:#anchor14)      document.queryS......