自定義事件子組件與父組件通信

作者:辰風沐陽 閱讀:2002 發(fā)布時間:2020-08-02 上次更新:2020-08-02

子組件中使用 $emit(‘tt’)

1. 示例一


  1. <div id="app">
  2. <parent @tt="go"></parent>
  3. {{ msg }}
  4. </div>
  5. <script>
  6. var par = {
  7. template: `<div>
  8. <button @click="$emit('tt', 'liang')">點我</button>
  9. </div>`
  10. }
  11. let vm = new Vue({
  12. el: '#app',
  13. data: {
  14. msg: 'init'
  15. },
  16. components: {
  17. parent: par
  18. },
  19. methods: {
  20. go: function(name){
  21. this.msg = name
  22. }
  23. }
  24. })
  25. </script>

2. 示例二


  1. <div id="app">
  2. <parent :arts="artList" @change-title="changeTitle"></parent>
  3. {{ msg }}
  4. </div>
  5. <script>
  6. var par = {
  7. template: `
  8. <ul>
  9. <li v-for="art in arts">
  10. <span>{{ art.title }}</span>
  11. <button @click="$emit('change-title', art.title)">點我</button>
  12. </li>
  13. </ul>
  14. `,
  15. props: ['arts']
  16. }
  17. let vm = new Vue({
  18. el: '#app',
  19. data: {
  20. msg: '',
  21. artList: [
  22. {
  23. title: '紅色'
  24. },
  25. {
  26. title: '綠色'
  27. },
  28. {
  29. title: '藍色'
  30. }
  31. ]
  32. },
  33. components: {
  34. parent: par
  35. },
  36. methods: {
  37. changeTitle: function(title){
  38. this.msg = title
  39. }
  40. }
  41. })
  42. </script>

標簽: vue