父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件中的对象或数组,:key="item.index",这样是防止报警告;

子组件通过发射事件$emit();发射事件,父组件监听子组件发射的事件,通过事件监听,定义方法接受子组件传递的相关数据,子组件在发射事件的时候可以传递相关的数据,父组件监听的函数可以接收数据;

父组件向子组件传值,是通过属性的方式传值,vue单向数据流,子组件使用父组件的数据,但是不能修改父组件传个子组件的内容,否则会影响其他子组件对父组件的数据引用,因此vue是单向数据流是这么考虑的

父组件代码如下:

<template>
<div id="app">
<input type="text" v-model="inputValue" />
<button @click="handleBtn">提交</button >
<Hello :content="item" :index="index" :key="item.index" v-for="(item ,index) in list"
//监听子组件发射的delete事件,并且绑定handleDelete方法 @delete="handleDelete"></Hello>
    <router-view/>
</div>
</template>
<script>
//子组件引入
import Hello from './components/HelloWorld'
export default {
name: 'App',
components:{
Hello
},
data(){
return {
list:[],
inputValue:'', }
},
methods:{
handleBtn(){
this.list.push(this.inputValue);
this.inputValue = '';
},
//接收子组件传递的数据
handleDelete(index){ this.list.splice(index,1)
}
}
}
</script>
子组件代码
<template>
<div class="hello"> <ul>
<li @click="handleClick" >{{content}}</li>
<li></li>
</ul>
</div>
</template>
<script>
export default {
props:['content','index'],
data () { return {
}
},
methods:{
handleClick(){
//发射事件delete,发射props中的index(这里是list的数组索引)
this.$emit('delete',this.index);
}
}
} </script>
 

vue 父向子组件传递数据,子组件向父组件传递数据方式的更多相关文章

  1. vue 父组件中的数据如何传递给子组件

    父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...

  2. vue父组件如何向子组件中传递数据?

    原文地址 props传参 父组件: <template> <parent> <child :list="list"></child> ...

  3. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  4. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  5. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  6. Vue2.x中的父组件数据传递至子组件

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...

  7. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  8. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  9. vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

    以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...

  10. vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...

随机推荐

  1. @Autowired与@Resource 详细诠释和区别(附带例子)

    @Autowired 与@Resource:1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配( ...

  2. 零基础学习python_类和对象(36-40课)

    今天我们开始学习面向对象的知识咯,之前我对面向对象也学的懵懵的,因为感觉知道好像又不是特别清楚,接下来我们一起来学习类和对象吧.零基础的课程我都是看小甲鱼的视频学的,没基础的可以去这个网址下载视频学习 ...

  3. Jquery在表格中搜索关键字

    <!DOCTYPE html><html><head> <title>ddd</title></head><body> ...

  4. python中的upper、lower、capitalize、title

    upper()字符串中字母由小写变为大写 lower()字符串中字母由大写变为小写 capitalize()字符串中字母首字母大写其余小写 title()字符串中字母每个单词的首字母大写其余小写 举个 ...

  5. python中的count

    count(self, sub, start=None, end = None)用于计算字符串中子序列的个数,sub, start=None, end = None定义查找范围,不写默认查找全部 举个 ...

  6. python中的partition、rpartition

    partition()从左向右寻找,以字符串中的某个元素为中心将左右分割共分割成三个元素并放入到元组中 partition()从右向左寻找,以字符串中的某个元素为中心将左右分割共分割成三个元素并放入到 ...

  7. svn tree confflect

    同事提交了一些文件,我尝试更新那个目录, 却总是无法更新到他的提交, 一直都是工作空间的内容.而且资源管理器的目录图标显示, 出现变动(就是右上角有个红色的那种). 难道同事没有提交成功吗? 检查sv ...

  8. djangobb之forum.topics

    看djangobb源代码时,看到view的show_forum(request, forum_id, full=True)时,对于topics = forum.topics.order_by('-st ...

  9. linux poi生成excel demo调试附调用代码

    1.下载poi-3.9-20121203.jar包 2.java code package com.userpackage; import java.io.FileOutputStream; impo ...

  10. redis点

    (1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正) (2)Reids的特点 Redis本质上是一个Key-Value类型的 ...