vue组件传值

使用vue-cli构建完成后,HelloWorld为父组件,Test和Test2为子组件

一 父组件向子组件传值

vue组件传值_第1张图片

HelloWorld.vue:






Test.vue:



这样就可以获取到父组件里的数据了,但是当触发change事件时虽然可以改变name值但是会报一个警告,类似:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

大概意思就是:避免直接改变属性,因为每当父组件重新呈现时,该值都将被覆盖。相反,使用基于属性值的数据或计算属性。

可以在子组件里使用一个值去接受这个数据,绑定这个值就行了,这样警告就没有了

Test.vue:




二 子组件向父组件传值(事件传值)

Test.vue:




HelloWorld.vue:




三 slot的使用

子组件:




父组件:



                    
                    

你可能感兴趣的:(vue)