20190225 vue 第四课

一、监听属性：watch
监听属性可以监听变量、函数，发生的变化，加上一个数值变量的累加，也可统计变化的次数。
代码如下：

前台效果：

这里监听的是计算属性的变化，每执行一次计算属性，累加值加1，而oldname和newname则分别是变化前和变化后的值。
二、根据输入值，自动生成列表
这里需要结合双向绑定v-model和v-for来完成。
首先定义两个变量，分别为字符串和数组变量。

其次，定义一个文本框和按钮，在文本框输入字符，通过click事件把内容添加到数组变量当做，再通过v-for显示出来。

单击事件代码如下：

三、父组件向子组件传递变量函数：
父组件向子组件传递，首先需要在父组件定义好，然后通过子组件调用，实现功能或显示变量值。
传递方式：

变量前面要加“:”,函数前要加“@”，等号前面的内容为父组件定义名称，等号后边内容为子组件调用名称。
调用方式：

在props中添加调用变量的名称，变量名前后要加单引号，要注意一点，在props后面是中括号[ ]。
子组件代码：

前台效果：

四、修改父组件变量值
在修改父组件的变量值时，不可以直接在子组件中完成，需要调用父组件中定义好的函数，来修改父组件的变量值，再传回子组件。
在父组件定义一个变量值为：100，定义两个函数，分别为改变了值加1和减1，而在子组件中要修改该变量值时，则需要调用父组件定义好的函数。
父组件代码：

子组件代码：

子组件函数代码：

这里的this.$emit()是固定格式。
前台效果：