• `,
  • props: {
  • /* msg:{
  • type: Array
  • } */
  • /* msg:{
  • type: Object
  • } */
  • msgab:{
  • type:Function
  • },
  • },
  • methods:{
  • sum(){
  • this.msgab()
  • }
  • }
  • }
  • }
  • })
  • script>
  • body>
  • html>

    • 2.子传父

    ​ 子组件向父组件传值，使用自定义事件$emit。

    1.   
    2.   <div id="app">
    3.     
    4.     <cpn @itemclick="cpnClcik">cpn>
    5.  
    6.   div>
    7.  
    8.   
    9.   <template id="cpn">
    10.  
    11.     <div>
    12.       <button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}button>
    13.     div>
    14.   template>
    15.  
    16.   <script src="../js/vue.js">script>
    17.  
    18.   <script>
    19.     const cpn = {
    20.       template: "#cpn",
    21.       data() {
    22.         return {
    23.           categoties: [{
    24.               id: 'aaa',
    25.               name: '热门推荐'
    26.             },
    27.             {
    28.               id: 'bbb',
    29.               name: '手机数码'
    30.             },
    31.             {
    32.               id: 'ccc',
    33.               name: '家用家电'
    34.             },
    35.             {
    36.               id: 'ddd',
    37.               name: '电脑办公'
    38.             },
    39.           ]
    40.         }
    41.       },
    42.       methods: {
    43.         btnClick(item) {
    44.           this.$emit('itemclick', item)
    45.         }
    46.       },
    47.     };
    48.     const app = new Vue({
    49.       el: "#app",
    50.       data() {
    51.         return {
    52.  
    53.         }
    54.       },
    55.       methods: {
    56.         cpnClcik(item) {
    57.           console.log('cpnClick'+item.name);
    58.         }
    59.       },
    60.       components: {
    61.         cpn
    62.       },
    63.     })
    64.   script>

    1.在子组件中定义一个方法btnClick(item)，使用$emit，'itemclick'是事件名，item是传过去的值。

    1.       methods: {
    2.         btnClick(item) {
    3.           this.$emit('itemclick', item)
    4.         }
    5.       },

    2.在子组件中监听点击事件并回调此方法

    2.       <button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}button>

    3.在父组件中定义一个方法cpnClcik(item)

    1. methods: {
    2. 	cpnClcik(item) {
    3. 		console.log('cpnClick'+item.name);
    4. 	}
    5. },

    4.并在父组件（vue实例）中调用（不写参数默认传递btnClick的item ），父组件监听事件名为itemclick的子组件传过来的事件。

    "cpnClcik">

    四、父访问子（children、ref）

    1.children、ref基本用法

    ​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children和$ref。

    使用this.$children直接获取**当前实例的直接子组件，需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

    1.   
    2.   <div id="app">
    3.     <cpn>cpn>
    4.     <cpn>cpn>
    5.     <cpn ref="aaa">cpn>
    6.     <button @click="btnClick" >按钮button>
    7.   div>
    8.   
    9.   <template id="cpn">
    10.     <div>
    11.       我是子组件
    12.     div>
    13.   template>
    14.   <script src="../js/vue.js">script>
    15.   <script>
    16.     // 父传子：props
    17.     const cpn = {
    18.       template: "#cpn",
    19.       data() {
    20.         return {
    21.           name:"我是子组件的name"
    22.         }
    23.       },
    24.       methods: {
    25.         showMessage(){
    26.           console.log("showMessage");
    27.         }
    28.       },
    29.     };
    30.     const app = new Vue({
    31.       el: "#app",
    32.       data() {
    33.         return {
    34.           message:"hello"
    35.         }
    36.       },
    37.       methods: {
    38.         btnClick(){
    39.           // 1.children
    40.           // console.log(this.$children[0].showMessage)
    41.           // for (let cpn of this.$children) {
    42.           //   console.log(cpn.showMessage)
    43.           // }
    44.           // 2.$ref
    45.           console.log(this.$refs.aaa.name)
    46.         }
    47.       },
    48.       components: {
    49.         cpn
    50.       },
    51.     })
    52.   script>

    $children方式

    1. // 1.children
    2. console.log(this.$children[0].showMessage)
    3. for (let cpn of this.$children) {
    4.     console.log(cpn.showMessage)
    5. }

    $refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

    2.ref的基本使用 用在元素上

    1. ref的基本使用 用在元素上
    2. DOCTYPE html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>title>
    7.  
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11.           <p ref="p" @click="handelClick" id="ppp">hellop>
    12. 		div>
    13. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    14. 		<script>
    15. 			const app = new Vue({
    16. 				el: "#app",
    17. 				data: {
    18. 					
    19. 				},
    20. 				methods: {
    21.                  handelClick(){
    22. 					console.log(this.$refs.p);
    23. 					 const ppp = document.querySelector('#ppp')
    24. 					 console.log(ppp);
    25. 				 }
    26. 				},
    27. 				computed:{
    28. 					
    29. 				}
    30. 			})
    31. 		script>
    32. 	body>
    33. html>

    3.ref在子组件上的使用

    1. ref可以调用组件中的数据 

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10.            <counter ref="one" @change="handelChange">counter>
    11. 		   <counter ref="two" @change="handelChange">counter>
    12. 		   <div>total:{{total}}div>
    13. 		div>
    14. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    15. 		<script>
    16. 			Vue.component('counter',{
    17. 				template:'
      {{number}}
      '      ,
    18. 				data(){
    19. 					return {
    20. 						number:0
    21. 					}
    22. 				},
    23. 				methods:{
    24. 					handelclick(){
    25. 						this.number++;
    26. 						this.$emit('change');
    27. 					}
    28. 				}
    29. 			})
    30. 			const app = new Vue({
    31. 				el: "#app",
    32. 				data: {
    33. 					total:0
    34. 				},
    35. 				methods: {
    36.                  handelChange(){
    37. 					 this.total = this.$refs.one.number + this.$refs.two.number
    38. 				 }
    39. 				},
    40. 				computed:{
    41. 					
    42. 				}
    43. 			})
    44. 		script>
    45. 	body>
    46. html>

    2.ref可以调用组件中的方法

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10.               <helloworld ref="hello">helloworld>
    11.               <button @click="getHello">获取helloworld组件中的值button>
    12. 		div>
    13. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    14. 		<script>
    15. 			Vue.component('helloworld',{
    16. 				template:'
      '      ,
    17. 				data(){
    18. 					return {
    19. 						number:0
    20. 					}
    21. 				},
    22. 				methods:{
    23. 					handelclick(){
    24. 						console.log('被调用了');
    25. 					}
    26. 				}
    27. 			})
    28. 			const app = new Vue({
    29. 				el: "#app",
    30. 				data: {
    31. 					
    32. 				},
    33. 				methods: {
    34.                   getHello(){
    35. 					   this.$refs.hello.handelclick();
    36. 			                   console.log(this.$refs.hello.number);
    37. 					   console.log(this.$refs.hello.$el.innerHTML);
    38. 				  }
    39. 				},
    40. 				computed:{
    41. 					
    42. 				}
    43. 			})
    44. 		script>
    45. 	body>
    46. html>

    四、动态组件（is、component）

    1.is用于动态组件且基于 DOM 内模板的限制来工作。

    1. 基于 DOM 内模板的限制来工作
    2. DOCTYPE html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>title>
    7.  
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11.           <table>
    12. 			  <tr is="row">
    13. 			  tr> 
    14. 		  table>
    15. 		div>
    16. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    17. 		<script>
    18. 			Vue.component('row',{
    19. 				template:'111'
    20. 			})
    21. 			const app = new Vue({
    22. 				el: "#app",
    23. 				data() {
    24. 					return {}
    25. 				},
    26. 				methods: {
    27.                  
    28. 				},
    29. 				computed:{
    30. 					
    31. 				}
    32. 			})
    33. 		script>
    34. 	body>
    35. html>

    2.动态组件component

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			
    10. 			<component :is="type">component>
    11. 			<button @click="handerClick">点击button>
    12. 		div>
    13. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    14. 		 <script>
    15. 			 Vue.component('child-one',{
    16. 				 template:'
      child-one
      '
    17. 			 })
    18. 			 Vue.component('child-two',{
    19. 			 	template:'
      child-two
      '
    20. 			 })
    21. 			const app = new Vue({
    22. 				el:'#app',
    23. 				data(){
    24. 					return {
    25. 						type:'child-one'
    26. 					}
    27. 				},
    28. 				methods:{
    29. 					handerClick(){
    30. 						console.log('111');
    31. 						this.type=this.type==='child-one'?'child-two':'child-one';
    32. 					}
    33. 					
    34. 				}
    35. 			}) 
    36. 			 
    37. 		 script>
    38. 	body>
    39. html>

    3.动态组件官网案例

    1. 这是动态组件官网案例
    2. DOCTYPE html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>title>
    7. 		<style>
    8. 		.tab-button {
    9. 		        padding: 6px 10px;
    10. 		        border-top-left-radius: 3px;
    11. 		        border-top-right-radius: 3px;
    12. 		        border: 1px solid #ccc;
    13. 		        cursor: pointer;
    14. 		        background: #f0f0f0;
    15. 		        margin-bottom: -1px;
    16. 		        margin-right: -1px;
    17. 		      }
    18. 		      .tab-button:hover {
    19. 		        background: #e0e0e0;
    20. 		      }
    21. 		      .tab-button.active {
    22. 		        background: #e0e0e0;
    23. 		      }
    24. 		      .tab {
    25. 		        border: 1px solid #ccc;
    26. 		        padding: 10px;
    27. 		      }
    28. 		style>
    29. 	head>
    30. 	<body>
    31. 		<div id="app">
    32. 			<button v-for="(tab,index) in tabs":key="index" @click="handelclick(tab)" :class="getStyle(tab)">{{tab}}button>
    33. 			<component :is="currentTabComponent">component>
    34. 		div>
    35. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    36. 		 <script>
    37. 			Vue.component('tab-home',{
    38. 				template:'
      child-one
      '
    39. 			})
    40. 			Vue.component('tab-posts',{
    41. 				template:'
      child-two
      '
    42. 			})
    43. 			Vue.component('tab-archive',{
    44. 				template:'
      child-three
      '
    45. 			})
    46. 			const app = new Vue({
    47. 				el:'#app',
    48. 				data(){
    49. 					return {
    50. 						 currentTab: "Home",
    51. 						 tabs: ["Home", "Posts", "Archive"]
    52. 					}
    53. 				},
    54. 				methods:{
    55. 					handelclick(tab){
    56. 						this.currentTab = tab
    57. 					},
    58. 					getStyle(tab){
    59. 						return ['tab-button',{active:this.currentTab===tab}]
    60. 					}
    61. 				},
    62. 				computed:{
    63. 					currentTabComponent(){
    64. 						/* return `tab-${this.currentTab}`.toLowerCase() */
    65. 						return "tab-"+this.currentTab.toLowerCase()
    66. 					},
    67. 					
    68. 				}
    69. 			}) 
    70. 			 
    71. 		 script>
    72. 	body>
    73. html>

  • 相关阅读:
    呕血回顾一次提高接口并发的经历，很实用
    【深入浅出C#】章节10: 最佳实践和性能优化：性能调优和优化技巧
    shell
    是js高级啊~
    数据仓库相关
    DOE认证是什么
    Opengl之立方体贴图
    Python:实现miller rabin米勒-拉宾素性检验算法(附完整源码)
    MVC Controlle View Model之间新建类
    Python实现PU口袋活动更新提醒
  • 原文地址：https://blog.csdn.net/yzq0820/article/details/126255306