父组件向子组件传值

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子组件：

export default {
 props:['message'],
 data (){
  return {
    msg:'轮播图123'
  }
 },
  methods:{
  	splitStr(){
      this.$emit('listenToChild',this.message);
  	} 
  }
}

父组件：

data (){
majiang:'' 一定要有初始化值
}

<div class="slide-banner">
			<input v-model="majiang">
			<Slide :message="majiang" @listenToChild="showMsg"></Slide>
		</div>

子组件向父组件传值

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

子组件：

<button @click="splitStr">向父组件传值</button>

methods:{
  	splitStr(){
      this.$emit('listenToChild',this.message.join('--'));
  	} 
  }

父组件：listenToChild 绑定的是子组件创建的$.emit

<Slide :message="majiang" @listenToChild="showMsg"></Slide>

methods:{
  	showMsg(data){
  		console.log(data);
  	}
  }

欢迎关注小程序，感谢您的支持！