vue父子组件传值示范

• 父组件通过props传值
• 子组件将输入框内容传给父组件 $emit

1.父组件通过props传值：

//父组件中：    newsContent赋值给 :content 
<News :content = 'newsContent'></News>
<script>
	export defult{
		data(){
			return{
				newsContent:'振兴中华'
			}
		}
	}
</script>

//子组件中：   props接收content的值的内容
<h1>内容是：{{content}}</h1>

<script>
	export defult{
		props:['content']
	}
</script>

2.子组件将输入框内容传给父组件 : 自定义事件 $emit

//login子组件：
  <div>
    <input type="text" v-model="username">
    <button @click='sendMsg'>将name传给父组件</button>
  </div>

<script>
export defult{
	data(){
		return{
			username：''
		}
	},
	methods:{
		sendMsg(){
			//触发自定义事件(事件的名称，发送事件的参数)
			this.$emit('sendParentMsg',this.username)
		}
	}
}
</script>

//父组件： 监听发来的数据 @sendParentMsg
<Login @sendParentMsg='getChildMsg'></Login >
从子组件拿来的数据：{{msg}}

<script>
import Login from './component/Login'
export defult{
	components:{Login},
	data(){
		msg:''
	},
	methods:{
		getChildMsg(value){
			console.log(value)  ==>输出了子元素里拿到的值
			this.msg=value
		}
	}
}
</script>