1.父传子

父传子：主要是在父组件引入子组件，将要传值的值绑定指定的属性上如

然后在子组件用props接收即可在页面展示

1.父组件

<template><div class="home"><HelloWorld :msg = title></HelloWorld></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({components:{HelloWorld},data(){return{title:'父传子'}}
});
</script>

2.子组件

<template><div class="hello"><span>{{msg}}</span></div>
</template><script>
export default({props:{msg:String},data(){return{}}
});
</script><style scoped>
</style>

2.子传父

1.父组件

<template><div class="home"><HelloWorld :msg = title v-on:child_string_parent="child_string_parent"></HelloWorld></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({components:{HelloWorld},data(){return{title:'父传子'}},methods: {child_string_parent(_row){console.log('_row=>',_row)}},
});
</script>

2.子组件

<template><div class="hello"><span>{{msg}}</span><br><el-button size = "mini" type="primary" @click="click_trigger">点击触发</el-button></div>
</template><script>
export default({props:{msg:String},data(){return{child_string_parent:'子传父'}},methods: {click_trigger(){this.$emit("child_string_parent",this.child_string_parent)}},
});
</script><style scoped>
</style>