019_Vue子组件向父组件传值

1. 父组件向子组件传递信息

1.1. props传递数据原则: 单向数据流。

1.2. 子组件通过自定义事件向父组件传递信息

<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>

1.3. 父组件监听子组件的事件

<menu-item :arr='parr' @enlarge-text='handle'></menu-item>methods: {handle: function(){}
}

1.4. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>父组件向子组件传递信息</title></head><body><div id="app"><div :style='{fontSize: psize + "px"}'>{{pmsg}}</div><menu-item :arr='parr' @enlarge-text='handle'></menu-item></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['arr'],template: `<div><ul><li :key='index' v-for='(item,index) in arr'>{{item}}</li></ul><button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button></div>`});var vm = new Vue({el: "#app",data: {pmsg: '父组件中内容',parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],psize: 10},methods: {handle: function(){// 扩大字体大小this.psize += 5;}}});</script></body>
</html>

1.5. 效果图

1.6. 点击扩大父组件中字体大小按钮

2. 父组件向子组件传值

2.1. 子组件通过自定义事件向父组件传值

<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

2.2. 父组件监听子组件的事件

<menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item>methods: {handle: function(val){}
}

2.3. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>子组件向父组件传值</title></head><body><div id="app"><div :style='{fontSize: psize + "px"}'>{{pmsg}}</div><menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['arr'],template: `<div><ul><li :key='index' v-for='(item,index) in arr'>{{item}}</li></ul><button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button><button @click='$emit("enlarge-text", -5)'>缩小父组件中字体大小</button></div>`});var vm = new Vue({el: "#app",data: {pmsg: '父组件中内容',parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],psize: 10},methods: {handle: function(val){this.psize += val;}}});</script></body>
</html>

2.4. 效果图

2.5. 点击扩大父组件中字体大小按钮

2.6. 点击缩小父组件中字体大小按钮

019_Vue子组件向父组件传值相关推荐

组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue 子组件给父组件传值
vue通信之子组件给父组件传值子组件给父组件传值背景一般是子组件中某一事件之后,得到的某一状态或者是值,想要通知父组件改变. 通过自定义事件传值. 子组件: <Button type=&quo ...
vue子组件给父组件传值时接收不到数据
子组件给父组件传值的步骤如下: 1.在子组件中创建一个按钮,给按钮注册一个点击事件. 2.在响应点击事件中使用$emit来触发一个自定义事件,并且传递需要的参数 3.在父组件中的子标签中监听该自定义事 ...
Vue学习--子组件向父组件传值
Vue–子组件向父组件传值 //子组件 <template><div id="foot"><li @click="point(1)" ...

019_Vue子组件向父组件传值

019_Vue子组件向父组件传值相关推荐

最新文章

热门文章