父组件给子组件传参

父给子传参的过程非常简单,我们再create vue的时候的模板就已经给我们一个例子了.

在父组件App中 引入HelloWorld子组件,在components中注册完毕后.我们给子组件HelloWorld标签 给予一个自定义属性msg 并把想给子组件传的值赋于msg属性

在子组件中通过props接收,这种props对象形式的方式可以让接收值更加的严谨.

子组件给父组件传参

相对于父给子,子给父就麻烦了不少.核心是this.$emit.

我们要把子组件input框的内容传给父组件,首先用v-model与changeVal双向绑定.利用watch监听changeVal的变化,一旦发生变化,利用this.$emit来传值给父组件,第一个绿色的childVal是自定义属性的名称,后面红色的是要传的值.

在子组件在父组件注册完毕后,我们在子组件的标签中利用事件和方法的形式来接收值,此时绑定的事件就是子组件传过来的childVal,然后为其绑定一个方法getVal

在method中定义形参msg接收子组件的值,并赋给父组件中的msgVal.