案例: 父組件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!- ...
案例:
父組件
<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>