案例:
父组件
<template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!--父组件向子组件传递参数--> <hello-word :count2="count"></hello-word> </div> </template> <script> import HelloWord from "./components/HelloWord"; export default { name: 'App', components:{ HelloWord }, data() { return{ count: 0 } } } </script>
子组件
<template> <div> <h2>我是子组件</h2> <h3>count3:{{count2}}</h3> </div> </template> <script> export default { name: "HelloWord", props:{ count2:Number } } </script> <style scoped> </style>