Vue父子组件间传值

Vue父子组件间传值

1. 通过组件名+props直接传值–父向子

父:

<TitleBg :title='til'/>
  ...
data: function () {
  return {
    til: 'hello'
  }
}
...

子：

<div id="title-name">{{title}}</div>
...
props: {
  title: String
}

//或者props: ['title']

2. 通过emit–子向父

父：
父组件通过绑定传递过来的方法来实现数据的接收

<TitleBg @totitle="totitle"/>
  ...
totitle(data){
  window.console.log(data)
}

子：
绑定时间触发，在事件中调用$emit

<div id="my-collect" @click="sendTitle">我的收藏</div>
...
data: function () {
  return {
    info: 'message'
  }
},
methods: {
  sendTitle(){
    this.$emit('totitle',this.info);
  }
}

3. 通过refs调用子组件中的方法

父：

<TitleBg ref="chil"/>
  ...
mounted() {
  this.$refs.chil.child()
}

子：

	methods: {
    child() {
      window.console.log('i am child')
    }
  }

4. 通过$children[]来获取组件的数据

window.console.log(this.$children[2].msg)

5. 通过$parent. 来获取和修改父组件中的数据

mounted() {
  this.$parent.HELLO = 'hello'
  const msg = this.$parent.HELLO;
  window.console.log(msg)
}

6. 通过vuex