简单了解vue中的父子组件如何相互传递值(基本方向)

前言

首先，你需要知道vue中的父组件和子组件分别指的是什么。

父组件：使用new Vue()构造函数创建的vue —— vue实例的根实例(该实例将有一个挂载点，挂载点中的所有内容都可以理解为父组件的内容)

这里使用root作为挂载点，root中包含的所有内容都可以称为模板，也就是我们常说的父组件

子组件：用Vue.component()注册的组件(下图中的todo-item是组件的名称，可以自定义，建议用短横线分开命名)

定义组件名称的两种方法(截图来自vue官网)

注意：建议在html(不是字符串模板)中引用组件时，都用短横线命名，所有字母都是小写

父组件将值传递给子组件

父组件：以属性的形式传递(例如v-bind:content='item '，item的值通过v-bind属性动态赋给内容变量)

子组件：接收父组件通过道具传递的值

子组件将值传递给父组件

子组件：通过$emit()方法发布事件广播

父组件：捕获子组件触发的事件，然后执行相应的方法

下图显示子组件通过$emit()方法传递删除事件，父组件在捕获删除事件后执行handleDelete()方法

下图中的methods方法默认指向vue实例

不要将methods方法写成arrow函数，因为arrow函数会改变方向，这样默认情况下就不会指向vue实例，而是指向undefined

同时，由于同样的原因，vue实例中的数据、计算和观察属性不应写成箭头函数

注意：@delete='handleDelete '是on:click=' handleDelete '的缩写；

:content='item '是v-bind:content='item '的缩写

补充：如何注册全局组件和本地组件

:注册全局组件(使用Vue.component()，组件名称为todo-item，可自定义，建议用短横线分开命名)

:注册本地组件(通过JavaScript对象定义组件)

注册本地组件后，直接引用组件todo-item/todo-item将报告一个错误，指示该组件未注册

解决方法是用vue实例中的组件声明它

注意：对于组件对象中的每个属性，其属性名是自定义元素的名称，其属性值是该组件的选项对象

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。