vue 父组件与子组件之间的传值（普通传值）

一，子组件向父组件传值（$emit）：

1、定义子组件

<template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type="button" value="点击触发" @click="childClick"></div>
</template>
<script>export default {data () {return {childValue: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit('childByValue', this.childValue)}}}
</script>

2、定义父组件

<template><div>父组件:<span>{{name}}</span><br><br><!-- 引入子组件 定义一个on的方法监听子组件的状态--><child v-on:childByValue="childByValue"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}},methods: {childByValue: function (childValue) {// childValue就是子组件传过来的值this.name = childValue}}}
</script>

总结：
子组件向父组件传值，同样的他们之间的契合点也是子组件引入的地方。
首先来到子组件，用$emit发射数据
然后再来到父组件，在契合点的地方

二，父组件向子组件传值（props）

1、定义父组件
<template><div>父组件:<input type="text" v-model="name"><br><br><!-- 引入子组件 --><child :inputName="name"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}}}
</script>

2、定义子组件

<template><div>子组件:<span>{{inputName}}</span></div>
</template>
<script>export default {// 接受父组件的值props: {inputName: String,required: true}}
</script>

总结：
父组件想要向子组件传值，那么必然有一个地方是相互衔接的，意思就是我们要找到父组件与子组件之间的那个契合点。
契合点就是：子组件引入的地方

那么我们可以自定义一个属性来存放父组件向子组件传递的数据。

这样，父组件就把值传出去了，那么就回到子组件来接收这个值

到这里，子组件就拿到了父组件传递过来的值了
子组件使用该值

vue 父组件与子组件之间的传值（普通传值）相关推荐

vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组显示两个组件的信 ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
vue 父链和子组件索引_Vue.js 学习笔记第7章组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
【vue】父组件与子组件之间的数据交互
一.前端项目目录结构二.vue单文件组件格式注意1: scoped表示对当前组件生效 <style scoped> </style> 这个是设置组件中html样式(css) ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
vue父组件与子组件之间传值
1.父组件像子组件传值:v-bind进行绑定:(自定义属性) 父组件其中counts是自定义属性,它的值是传给子组件的子组件子组件通过props属性,counts是父组件传过来的值 2.子组件向 ...

vue 父组件与子组件之间的传值（普通传值）

一，子组件向父组件传值（$emit）：

二，父组件向子组件传值（props）

vue 父组件与子组件之间的传值（普通传值）相关推荐

最新文章

热门文章