vue组件传值的方式及示例

• 父组件给子组件传值

  • 父组件在子组件的标签里写行内属性

  <son :msg="myMsg" test="hello"></son> <!--不加冒号传的是该字符串，加冒号是表达式-->
  

  • 子组件通过 props 接收，有几个值代表父组件传几个参数

  props:['msg','test']
  

• 子组件给父组件传值

  • 子组件用$emit传

  this.$emit(参数1，参数2) //参数1是自定义事件名，参数2是传递给父组件的值
  
  //示例1：写在template里面
  <input type="text" v-model="txt" @input="$emit('change',txt)">
  

  • 父组件在子组件的标签加参数1这个自定义事件

  <组件 @参数1名字="方法"></组件> <!--方法的参数就是子组件传递过来的值-->
  
  <!--$event即上面示例1传过来的值-->
  <son @change="msg=$event"></son>
  

• 双向数据绑定

<!--父组件-->
<!--<son :txt="msg" @change="msg=$event"></son>-->
<son v-model="msg"></son><!--与上面的是一样的意思-->

<!--子组件-->
<input type="text" v-model="txt" @input="$emit('change',txt)"/>

<script>
export default {
	props:["txt"],
	model:{
		prop:"txt",  //因为父组件传过来的属性名是txt，所以使用v-model的话这里要写txt，默认的属性名是value
		event:"change" //默认事件名是input
	}
} 
</script>