Vue父子组件传值

父子组件

什么是父子组件呢?
一般认为id为"root "的就是父组件,其他的均为子组件.
举个例子,我想创建一个名字为"counter"的子组件
需要在script中新建:

同时的话,在父组件也要关联上子组件:

同时在父组件中,嵌入子组件:

父组件通过属性的形式向子组件来传递数据

通过 :count=“0” 属性来传递

举个例子,如果想要实现,点击子组件,数字+1

父组件向子组件传递数据

需要在子组件中添加一个click方法:

但是这时候,问题出现了:
你不要直接修改父组件传递过来的数据,这是因为,在vue中有一个单项数据流的概念,父组件可以向子组件传递参数,传递过的参数可以随意修改,但是子组件不能随意修改父组件传过来的数据,比如说父组件向子组件传递过来1个3,子组件可以用,但是你不能修改,这是因为,你修改的如果是一个引用类型的数据,这个被引用的数据可能也被其他子组件所引用,就会修改了其他的内容.

修改方式:
在子组件汇总定义一个data,在data中定义一个函数,这样的话,就不是修改父组件的属性,而是通过一个中介进行修改了.

子组件向父组件传递数据

子组件通过事件的形式向父组件来传递数据

父组件中定义一个div,里边有一个total变量,用于计算两个数字的和.

子组件中添加触发事件

父组件添加监听事件,监听事件也为inc.

然后,在根实例中,添加触发的方法:

这样,通过子组件向父组件传值,父组件根据得到的值就可以进行操作了.