11. Vue父子传值

401 阅读1分钟

父传子:通过属性传递

a.在父组件内通过属性传值,在引入子组件的标签上,自定义属性然后绑定上你所需要传输的值
b.在子组件内通过props属性进行接收
c. 所接收的值不能直接修改
接收方法:

子传父:通过事件 传递

a.在父组件内定义一个方法
B.然后在子组件内进行调取,调取方法为:this.$patent.方法名(然后把所需要的参数传到方法的参数里)

如图所示: 父组件:注释:代码内容不重要,重要的是定义了一个changeVal 这个函数,然后接收了it这个参数

子组件:注释:这个方法是直接调用了父组件的方法,也就是直接获取了整个父组件对象,所以这个方法很多时候不合理,相当于子组件干涉了父组件的业务
            子组件内有一个changeEvt这个事件来触发父组件的方法
            使用this.$parent.changeVal( it )来调取父组件所定义的方法,it 则为所需要传入的参数

子传父,方法二:

通过自定义事件进行传递
    a.在父组件内引入子组件的标签上,自定义一个事件,如:@changVal=“changeVal”
    b.在子组件内,通过$emit进行值传递,如this.$emit( “changeVal”, it, “other” ),第一个参数固定为定义的事件名,后面接着写所需要带上的参数, 可以一次往后排,也可以传入一个对象
    如图所示:
父组件:在父组件内定义方法的方式和  "方法一"  一样

子组件:在子组件内,通过$emit进行传值


主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:github.com/xitu/juejin…

theme: juejin highlight: