Vue笔记(5)

学习内容

⊙ 组件可以访问Vue实例数据吗

⊙ 父子组件的通信

⊙ 组件通信-父传子

⊙ 组件通信-子传父

组件可以访问Vue实例数据吗

我们可以测试一下:

得出的结果是不行的

Vue组件应该有自己保存数据的地方

这样会报错:

我们看看正确的写法:

我们来用组件实现一下之前的计数器:

父子组件的通信

父传子写法

但是也会觉得奇怪

为什么里面明明是变量却写成字符串的形式呢?其实有很多种写法:

注意: 如果我们在props中使用的是驼峰命名法,使用的时候用''-''连接,否则会报错

子传父写法

这个会比较复杂一点

应用场景:

当前我们在子组件中定义了一些数据:

现在我们要根据点击的板块,来将数据传给父组件,告诉父组件用户点击的是哪个板块

但是还没将数据传给父组件

接下来要在子组件的methods中做一些操作:

cpn当然是要定义在父组件中的:

唉感觉这个有点复杂有点难T T,等会需要复习一下了

就先到这里吧,我需要复习一下前面的内容去了