vue组件传值之父传子
1.父组件给子组件传值 home父组件 header子组件 关键字props
home代码
<template> <div> <v-header :title="title" :run="run"></v-header> <h2>我是home组件</h2> </div> </template> <script> import Header from './Header' export default { data() { return { msg: "msg", title:"hello" }; }, components:{ 'v-header':Header }, methods: { run(val) { alert(val); } }, }; </script>
header代码
<template> <div> <h1>我是header组件--{{title}}</h1> <button @click="run(123123)">调父组件函数</button> </div> </template> <script> export default { data() { return { }; }, props:['title','run'] }; </script>
效果: