Vue 组件间传值

父子组件间传值

  • 父组件—>子组件:
    1.父组件使用 v-bind 绑定变量并赋值给变量。
    2.在子组件里使用 props 来接收父组件传递过来的值。
  • 子组件—>父组件:
    1.子组件通过$emit()方法向外派发事件,传递参数。
    this.$emit('事件名',传递的参数);
    2.父组件通过监听子组件派发的事件来获得参数。
    监听 @事件名="方法名" 方法名(value){ .... //value=传递来的参数 }
    父组件取到值以后改变数据
 
  • 父—>子: 父组件v-bind:变量名=“js表达式” 子组件:props获取
    单项数据流: 子组件不能直接修改父组件传递来的参数
Vue 组件间传值_第1张图片
**错误示范**

修改Object的值会导致别的引用了该对象的子组件内数据的变化,
用在子组件内复制一份该对象,修改子组件内自己的data来代替


Vue 组件间传值_第2张图片
image.png

非父子组件间传值

你可能感兴趣的:(Vue 组件间传值)