props和$emit父子组件传值
父组件向子组件传值，通过props数组：
props 子组件获取父元素值 通过v-bind:parent=‘msg’ 再 props:[‘parent’]
<div id="app">
<com1 v-bind:chang="msg" @func="changMsg"></com1>
{{list}}
</div>
<template id="tmp1">
<div>
<h1>这是子元素--{{chang}}</h1>
<input type="button" name="" id="" @click="changChil" value="获取子元素中数据">
</div>
</template>
<script>
var com1={
template:`#tmp1`,
data(){
return{
msg:'我是子元素中内容'
}
},
props:['chang'],
methods:{
changChil(){
this.$emit('func',this.msg)
}
}
}
new Vue({
el:'#app',
data(){
return{
msg:'我是父元素的内容',
list:''
}
},
methods:{
changMsg(data){
this.list=data
}
},
components:{
com1
}
})
子组件通过事件调用向父组件传值 ，通过 $emit ：
父组件向子组件传递方法，使用的是事件绑定机制，v-on，当我们自定义了一个使劲按属性之后，那么，子组件就能够通过某些方式，来调用传递进去的这个方法
<div id="app">
<com @func="show"></com>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" name="" id="" value="触发按钮" @click='myclick'>
</div>
</template>
<script>
var com={
template:`#tmp1`,
data(){
return{
message:{name:'大头儿子'}
}
},
methods:{
// 当点击子组件的按钮的时候，如何拿到父组件传递过来的func方法
//
myclick(){
// 第一个参数是绑定的方法，第二个及后面的参数是传递给父组件的值
this.$emit('func',this.message)
}
}
}
// 通过指定一个id，表示说，要求加载这个指定的id的template元素中的内容，当中组件的html结构
var vm=new Vue({
el:'#app',
data:{
msg(){
mess:''
}
},
methods:{
show(data){
this.mess=data
}},
components:{
com
}
})