VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值
1. Vue实例可以看做是大的组件，那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系。
2. 父子组件在默认的情况下，子组件是无妨访问到父组件中的数据的，所以要想在子组件中使用父组件的数据的时候，就需要以属性绑定的形式，将父组件的数据传递到子组件中。
3. 通过属性绑定传递来的数据无法再子组件中直接使用，需要在props中重新定义以后才可以使用。例：props：['变量名']。props是一个数组。
4. 子组件中的data数据都是私有，子组件可以通过ajax请求到的数据放到data上使用。
5. props：[ ]中的数据都是只读的，不可以进行改变，如果强行改变页面也会显示改变后的效果，但是会有警告。
<body>
<div id="app">
<com1 v-bind:fudata="msg"></com1>
</div> </body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的数据----1234' },
components: {
com1: {
template: '<h1>这是子组件----5678---------{{fudata}}</h1>',
props: ['fudata']
}
}, })
</script>
父组件向子组件传递方法
1. 子组件要想获得父组件中的方法，需要使用时间绑定机制。
2. 在子组件中要想使用父组件传递过来的方法，需要用到一个新的方法 this.$enit.('方法名')
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/Vue.js"></script>
</head> <body>
<div id="app">
<com1 @func="show"></com1>
</div>
<template id="ttpp">
<div>
<h1>子组件</h1>
<input type="button" value="通过点击来获得父组件上的方法" @click="self">
</div>
</template>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
show() {
console.log("OK")
}
},
components: {
com1: {
template: '#ttpp',
methods: {
self() {
this.$emit('func');
}
}
},
}, })
</script> </html>
VUe.js 父组件向子组件中传值及方法的更多相关文章
- js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue中的父组件及子组件生命周期的执行顺序
一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...
- Vue中的父组件给子组件传值
父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...
随机推荐
- nginx之热部署，以及版本回滚
热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...
- 内置的os模块和sys模块
os模块:与操作系统交互的一种接口 """ os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname& ...
- Listview四种视图VIEW
http://wenku.baidu.com/link?url=65Ac8WL6j8KZwDlN8LyoxqFF5Jynvg80LnKc4jqTPQTY-59wwRDKhqGySYwxf6gZ9_6T ...
- L3-002 特殊堆栈 （30 分)
大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有“入栈”(将新元素插入栈顶)和“出栈”(将栈顶元素的值返回并从堆栈中将其删除).现请你实现一种特殊的堆栈,它多了一种操作叫“查中值”,即返回堆 ...
- Python 面向对象编程之进阶使用
我们在https://www.cnblogs.com/yinsedeyinse/p/9976280.html中学习了面向对象的编程方法.现在学习他的进阶用法. 1. 静态方法 2. 类方法 3. 属性 ...
- JVM 虚拟机栈
虚拟机栈: 栈元素是栈帧.方法调用,栈帧入栈,反之出栈. 栈帧:一个方法的运行空间. 1.局部变量表:方法定义的局部变量.方法的参数存在该表. 实例方法中有个隐含参数“this”,所以实例方法可以访问 ...
- kafka完全分布式搭建（2.12版）
1.下载解压 tar -xvf kafka_2.12-1.0.0.tgz 2.进入config目录下,修改server.propeties文件 broker.id=0 #当前server编号 port ...
- LeetCode--098--验证搜索二叉树（python）
给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜索树. ...
- A1031
画图,用二维数组作为画布 #include<cstdio> #include<string.h> int main(){ ],u[][]; scanf("%s&quo ...
- 五年双十一：SLS数据管道发展之路
日志服务SLS是一款飞天团队自研产品,服务云上云下3W+客户,并在阿里经济体中作为日志数据的基础设施,在过去几年中经历多次双十一.双十二.新春红包锤炼.在2019双十一中: 服务阿里经济体3W+ 应用 ...