情景

父组件有一个 btnList 数组，里面存放着按钮的名称和按钮的id，现在要把这个数组传入到子组件中进行渲染。

子组件渲染出按钮后，点击按钮，父组件的 h1 标签中会显示出当前点击的按钮是哪一个。

实现

父组件传值给子组件可以使用 props 的方式，但是这种方式只能单向数据传递，即 只能父组件传，子组件接收。

子组件传值给父组件使用 自定义事件 $emit() 。

HTML版

代码

<div id="app"><father></father>
</div>
<!-- 模板抽离写法 -->
<!-- 父组件模板 -->
<template id="father"><div><h1>{{whichOne}}</h1><son :list="btnList" @btn-click="sonBtnClick"></son></div>
</template>
<!-- 子组件模板 -->
<template id="son"><div><button v-for="btn in list" :key="btn.id" @click="btnClick(btn)">{{btn.name}}</button></div>
</template>
<script src="../vue.js"></script>
<script>//子组件构造器const son = Vue.extend({template: '#son',props: {list:{type:Array,//类型为数组或者对象时，默认值要写成一个工厂函数，然后返回默认值default(){return [];}}},methods:{btnClick(btn){//子组件发射事件到父组件this.$emit('btn-click',btn);}}});//采用语法糖的方式注册一个父组件Vue.component('father', {template: '#father',data() {return {whichOne: '当前未点击按钮',//当前点击的是哪个按钮btnList: [{id: 1,name: '按钮1'},{id: 2,name: '按钮2'},{id: 3,name: '按钮3'}]}},methods:{sonBtnClick(btn){console.log(btn);this.whichOne = `id:${btn.id}  name:${btn.name}`;}},components: {son,//注册子组件}});//Vue实例const app = new Vue({el: '#app',});
</script>

网页版的写法有点繁琐，用Vue CLI版的代码做解析。

Vue CLI版

App.vue 是父组件，Son.vue 是子组件。

App.vue

<template><div><h1>{{whichOne}}</h1><son :list="btnList" @sonClick="mySonClick"></son></div>
</template><script>
import son from './components/Son.vue';//引入子组件export default ({data(){return {whichOne:'当前无按钮被点击',btnList:[//父组件传递到子组件的数组{id:1,name:'按钮1'},{id:2,name:'按钮2'},{id:3,name:'按钮3'}]}},components:{son//注册子组件},methods:{mySonClick(btn){console.log(btn);this.whichOne = `id:${btn.id}  name:${btn.name}`;//把子组件传来的值显示在页面}}
});
</script>

Son.vue

<template><div><button v-for="btn in list" :key="btn.id" @click="btnClick(btn)">{{btn.name}}</button></div>
</template><script>
export default {props:{list:{type:Array,default(){return [];}}},methods:{btnClick(btn){this.$emit('sonClick',btn);}}
}
</script>

代码解析

props

大小写不敏感
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

props验证
可以为子组件的 prop 指定类型、默认值、是否必填以及自定义验证规则，从而在父组件传递不符合预期的值到子组件时及时发现。

props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

自定义事件

Vue 2.x版本

Vue 3.x版本

【Vue】父子组件之间的通信相关推荐

vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
React（一）父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分.备注一下基础要点. 1.父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件 .父组件代码 i ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...

【Vue】父子组件之间的通信

情景

实现