• 4.组件间数据交互

    目录

    4.1 父组件向子组件传值

            1.组件内部通过props接收传递过来的值

            2.父组件通过属性将值传递给子组件

             3.props 属性名规则 

            4.props属性值类型

    4.2 子组件向父组件传值

    4.3 非父子组件间传值

    4.4 组件插槽

    4.5 具名插槽

    4.6 作用域插槽

    4.1 父组件向子组件传值

            1.组件内部通过props接收传递过来的值

            2.父组件通过属性将值传递给子组件

    1.组件内部通过props接收传递过来的值
            Vue.component('menu-item', {
                props: ['title'],
                template: '

    {{title}}
    '
            })
        2.父组件通过属性将值传递给子组件
            
            

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<div>{{pmsg}}div>
    10. 			<menu-item title='来自父组件的值'>menu-item>
    11. 			<menu-item :title='ptitle' content='hello'>menu-item>
    12. 		div>
    13. 	body>
    14. 	
    15. 	<script type="text/javascript" src="../js/vue.js">script>
    16. 	<script type="text/javascript" >
    17. 	
    18. 	/*
    19. 	父组件向子组件传值
    20. 	1.组件内部通过props接收传递过来的值
    21. 		Vue.component('menu-item', {
    22. 			props: ['title'],
    23. 			template: '<div>{{title}}div>'
    24. 		})
    25. 	2.父组件通过属性将值传递给子组件
    26. 		<menu-item title='来自父组件的值'>menu-item>
    27. 		<menu-item :title='ptitle' content='hello'>menu-item>
    28. 	 */
    29. 	Vue.component('menu-item', {
    30. 		props: ['title', 'content'],
    31. 		data: function(){
    32. 			return {
    33. 				msg: '子组件本身的数据'
    34. 			}
    35. 		},
    36. 		template: '<div>{{msg + "--" + title + content}}div>'
    37. 	})
    38. 		var vm = new Vue({
    39. 			el:'#app',
    40. 			data:{
    41. 				 pmsg: "父组件内容",
    42. 				 ptitle: '动态绑定属性'
    43. 			},
    44. 			methods: {
    45. 				handle: function (event) {
    46. 					
    47. 				}
    48. 			}
    49. 		});
    50. 	script>
    51. html>

             3.props 属性名规则 

    父组件向子组件传值
        3.props 属性名规则
            1.在props中使用驼峰形式，模板中需要使用短横线的形式（html页面标签）
            Vue.component('menu-item', {
                props: ['xyzTitle'],
                template: '

    {{xyzTitle}}
    '
            })
            
            2.字符串形式的模板中没有这个限制
            Vue.component('menu-item', {
                props: ['xyzTitle'],
                template: '
    {{xyzTitle}}
    '
            });

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<div>{{pmsg}}div>
    10. 			<menu-item xyz-title="父组件静态">menu-item>
    11. 		div>
    12. 	body>
    13. 	
    14. 	<script type="text/javascript" src="../js/vue.js">script>
    15. 	<script type="text/javascript" >
    16. 	
    17. 	/*
    18. 	父组件向子组件传值
    19. 	3.props 属性名规则
    20. 		1.在props中使用驼峰形式，模板中需要使用短横线的形式（html页面标签）
    21. 		Vue.component('menu-item', {
    22. 			props: ['xyzTitle'],
    23. 			template: '<div>{{xyzTitle}}div>'
    24. 		})
    25. 		<menu-item xyz-title="父组件静态">menu-item>
    26. 		2.字符串形式的模板中没有这个限制
    27. 		Vue.component('menu-item', {
    28. 			props: ['xyzTitle'],
    29. 			template: '<div>{{xyzTitle}}<third-com testTitle="hello">third-com>div>'
    30. 		});
    31. 		
    32. 	 */
    33. 	Vue.component('third-com', {
    34. 		props: ['testTitle'],
    35. 		template: '<div>{{testTitle}}div>'
    36. 	});
    37. 	Vue.component('menu-item', {
    38. 		props: ['xyzTitle'],
    39. 		template: '<div>{{xyzTitle}}<third-com testTitle="hello">third-com>div>'
    40. 	});
    41. 	
    42. 		var vm = new Vue({
    43. 			el:'#app',
    44. 			data:{
    45. 				 pmsg: "父组件内容1",
    46. 				 ptitle: '父组件内容2',
    47. 			},
    48. 			methods: {
    49. 				handle: function (event) {
    50. 					
    51. 				}
    52. 			}
    53. 		});
    54. 	script>
    55. html>

            4.props属性值类型

            4.1父组件向子组件传值
            4.props属性值类型
                1. 字符串String
                    
                2. 数值Number （要加： v-bind绑定，否则是字符串）
                    
                3. 布尔值Boolean （要加： v-bind绑定，否则是字符串）
                    
                4. 数组Array
                    data:{
                         parr: ['apple', 'orange', 'banana']
                    },
                    
                5. 对象Object
                    data:{
                         pobj: {
                             name: 'lili',
                             age: 12,
                             gender: 'male'
                         }
                    },
                    

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<div>{{pmsg}}div>
    10. 			<menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'>
    11. 				
    12. 			menu-item>
    13. 		div>
    14. 	body>
    15. 	
    16. 	<script type="text/javascript" src="../js/vue.js">script>
    17. 	<script type="text/javascript" >
    18. 	
    19. 	/*
    20. 	4.1父组件向子组件传值
    21. 		4.props属性值类型
    22. 			1. 字符串String
    23. 				<menu-item :pstr='pstr' >menu-item>
    24. 			2. 数值Number （要加： v-bind绑定，否则是字符串）
    25. 				<menu-item :pnum='12'>menu-item>
    26. 			3. 布尔值Boolean （要加： v-bind绑定，否则是字符串）
    27. 				<menu-item :pboo='true'>menu-item>
    28. 			4. 数组Array
    29. 				data:{
    30. 					 parr: ['apple', 'orange', 'banana']
    31. 				},
    32. 				<menu-item :parr='parr'>menu-item>
    33. 			5. 对象Object
    34. 				data:{
    35. 					 pobj: {
    36. 						 name: 'lili',
    37. 						 age: 12,
    38. 						 gender: 'male'
    39. 					 }
    40. 				},
    41. 				<menu-item  :pobj='pobj'>menu-item>
    42. 				
    43. 	 */
    44. 	Vue.component('menu-item', {
    45. 		props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
    46. 		template: 
    47. 			`<div>
    48. 				<div>{{pstr}}div>
    49. 				<div>{{typeof pnum}}div>
    50. 				<div>{{ typeof pboo}}div>
    51. 				<ul>
    52. 					<li :key='index' v-for='(item, index) in parr'>{{item}}li>
    53. 				ul>
    54. 				<div>
    55. 					<span>{{pobj.name}}span>
    56. 					<span>{{pobj.age}}span>
    57. 					<span>{{pobj.gender}}span>
    58. 				div>
    59. 			div>	
    60. 			`
    61. 	})
    62. 		var vm = new Vue({
    63. 			el:'#app',
    64. 			data:{
    65. 				 pmsg: "父组件内容",
    66. 				 pstr: 'hello',
    67. 				 parr: ['apple', 'orange', 'banana'],
    68. 				 pobj: {
    69. 					 name: 'lili',
    70. 					 age: 12,
    71. 					 gender: 'male'
    72. 				 }
    73. 			},
    74. 			methods: {
    75. 				handle: function (event) {
    76. 					
    77. 				}
    78. 			}
    79. 		});
    80. 	script>
    81. html>

    4.2 子组件向父组件传值

    基本用法:
            props传递数据原则：单向数据流；
            1.子组件通过自定义事件向父组件传递信息
                
                
            2.父组件监听子组件的事件
                
            
            3.子组件通过自定义事件向父组件传递信息 5就是传递的参数
                
                
            4.父组件监听子组件的事件 $event参数接受固定写法
                

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}div>
    10. 			<menu-item :parr1='parr' @enlarge-text='handle($event)'>menu-item>
    11. 		div>
    12. 	body>
    13. 	
    14. 	<script type="text/javascript" src="../js/vue.js">script>
    15. 	<script type="text/javascript" >
    16. 	
    17. 	/*
    18. 	子组件向父组件传值-基本用法
    19. 		props传递数据原则：单向数据流；
    20. 		1.子组件通过自定义事件向父组件传递信息
    21. 			<button @click='$emit("enlarge-text")'>扩大字体button>
    22. 			
    23. 		2.父组件监听子组件的事件
    24. 			<menu-item :parr='parr' @enlarge-text='handle'>menu-item>
    25. 		
    26. 		3.子组件通过自定义事件向父组件传递信息 5就是传递的参数
    27. 			<button @click='$emit("enlarge-text", 5)'>扩大字体button>
    28. 			
    29. 		4.父组件监听子组件的事件 $event参数接受固定写法
    30. 			<menu-item :parr1='parr' @enlarge-text='handle($event)'>menu-item>
    31. 		
    32. 	 */
    33. 	Vue.component('menu-item', {
    34. 		props: ['parr1'],
    35. 		template: 
    36. 			`
    37. 			<div>
    38. 				<ul>
    39. 					<li :key='index' v-for='(item, index) in parr1'>
    40. 					{{item}}li>
    41. 				ul>
    42. 				<button @click='parr1.push("lemon")'>点击button>
    43. 				<button @click='$emit("enlarge-text", 5)'>扩大字体button>
    44. 				<button @click='$emit("enlarge-text", 10)'>扩大字体button>
    45. 			div>
    46. 			`
    47. 	})
    48. 		var vm = new Vue({
    49. 			el:'#app',
    50. 			data:{
    51. 				 pmsg: "hello",
    52. 				 parr: ['apple', 'orange', 'banana'],
    53. 				 fontSize: 10,
    54. 			},
    55. 			methods: {
    56. 				handle: function (val) {
    57. 					//扩大字体大小
    58. 					this.fontSize +=val;
    59. 				}
    60. 			}
    61. 		});
    62. 	script>
    63. html>

    4.3 非父子组件间传值

             1.单独的事件中心管理组件间的通信
                var hub = new Vue();
            2.监听事件与销毁事件
                监听：eventHub.$on('add-todo', addTodo); 
                销毁：eventHub.$off('add-todo'); 
            3.触发事件
                event.$emit('add-todo', 参数1)

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<div>
    10. 				<button @click="handle">销毁tombutton>
    11. 			div>
    12. 			<test-tom>test-tom>
    13. 			<test-jerry>test-jerry>
    14. 		div>
    15. 	body>
    16. 	
    17. 	<script type="text/javascript" src="../js/vue.js">script>
    18. 	<script type="text/javascript" >
    19. 	
    20. 	/*
    21. 	4.3 非父子组件间传值
    22. 		1.单独的事件中心管理组件间的通信
    23. 			var hub = new Vue();
    24. 		2.监听事件与销毁事件
    25. 			监听：eventHub.$on('add-todo', addTodo); 
    26. 			销毁：eventHub.$off('add-todo'); 
    27. 		3.触发事件
    28. 			event.$emit('add-todo', 参数1)
    29. 	 */
    30. 	//提供事件中心
    31. 	var hub = new Vue();
    32. 	Vue.component('test-tom', {	
    33. 		data: function(){
    34. 			return {
    35. 				num: 0
    36. 			}
    37. 		},
    38. 		template: 
    39. 			`
    40. 			
    41. 				
      Tom:{{num}}
    42. 				
    43. 					
    44.
  • `,
  • methods: {
  • handle: function(){
  • //触发兄弟组件的事件
  • hub.$emit('jerry', 2);
  • }
  • },
  • mounted: function(){
  • hub.$on('tom-event', (val) =>{
  • this.num +=val;
  • });
  • },
  • });
  • Vue.component('test-jerry', {
  • data: function(){
  • return {
  • num: 0
  • }
  • },
  • template:
  • `
  • Jerry:{{num}}
  • `,
  • methods: {
  • handle: function(){
  • //触发兄弟组件的事件
  • hub.$emit('tom-event', 1);
  • }
  • },
  • mounted: function(){
  • hub.$on('jerry', (val) =>{
  • this.num +=val;
  • });
  • },
  • });
  • var vm = new Vue({
  • el:'#app',
  • data:{
  • pmsg: "hello",
  • ptitle: "动态绑定属性",
  • ptitle2: "动态2"
  • },
  • methods: {
  • handle: function () {
  • hub.$off('tom-event');
  • }
  • }
  • });
  • script>
  • html>

    • 4.4 组件插槽

    组件插槽的作用
            1.父组件向子组件传递内容
            
        组件插槽基本用法
            1.插槽位置
                Vue.component('alert-box', {
                    template: `
                        


                            ERROR:
                            默认内容
                        

                    `,
                                                    
                });
            2.插槽内容
                 无内容为插槽的默认内容
                有bug发生
                有2个bug发生

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<alert-box>alert-box>
    10. 			<alert-box>有bug发生alert-box>
    11. 			<alert-box>有2个bug发生alert-box>
    12. 			
    13. 		div>
    14. 	body>
    15. 	
    16. 	<script type="text/javascript" src="../js/vue.js">script>
    17. 	<script type="text/javascript" >
    18. 	
    19. 	/*
    20. 	组件插槽的作用
    21. 		1.父组件向子组件传递内容
    22. 		
    23. 	组件插槽基本用法
    24. 		1.插槽位置
    25. 			Vue.component('alert-box', {
    26. 				template: `
    27. 					<div>
    28. 						<strong>ERROR:strong>
    29. 						<slot>默认内容slot>
    30. 					div>
    31. 				`,
    32. 												
    33. 			});
    34. 		2.插槽内容
    35. 			<alert-box>alert-box> 无内容为插槽的默认内容
    36. 			<alert-box>有bug发生alert-box>
    37. 			<alert-box>有2个bug发生alert-box>
    38. 	
    39. 	 */
    40. 	Vue.component('alert-box', {
    41. 		template: `
    42. 			<div>
    43. 				<strong>ERROR:strong>
    44. 				<slot>默认内容slot>
    45. 			div>
    46. 		`,
    47. 										
    48. 	});
    49. 		var vm = new Vue({
    50. 			el:'#app',
    51. 			data:{
    52. 				 msg: "hello",
    53. 			},
    54. 			methods: {
    55. 				handle: function (event) {
    56. 					
    57. 				}
    58. 			}
    59. 		});
    60. 	script>
    61. html>

    4.5 具名插槽

    具名插槽
            1.插槽定义
                Vue.component('base-layout', {
                    template: `
                        


                            

                                
                            

                            

                                
                            

                            

                                
                            

                        

                    `,
                });
            2.插槽内容
                
                    

    标题信息


                    

    主要内容1


                    

    主要内容2


                    

    底部信息


                    
                
            3.template标签用于包裹多个标签
                    

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<base-layout>
    10. 				<p slot='header'>标题信息p>
    11. 				<p>主要内容1p>
    12. 				<p>主要内容2p>
    13. 				<p slot='footer'>底部信息p>
    14. 				
    15. 			base-layout>
    16. 			
    17. 			<base-layout>
    18. 				<template slot='header'>
    19. 					<p>标题信息1p>
    20. 					<p>标题信息2p>					
    21. 				template>				
    22. 				<p>主要内容1p>
    23. 				<p>主要内容2p>
    24. 				<template slot='footer'>
    25. 					<p >底部信息1p>
    26. 					<p >底部信息2p>
    27. 				template>
    28. 				
    29. 				
    30. 			base-layout>
    31. 		div>
    32. 	body>
    33. 	
    34. 	<script type="text/javascript" src="../js/vue.js">script>
    35. 	<script type="text/javascript" >
    36. 	
    37. 	/*
    38. 	具名插槽
    39. 		1.插槽定义
    40. 			Vue.component('base-layout', {
    41. 				template: `
    42. 					<div>
    43. 						<header >
    44. 							<slot name='header'>slot>
    45. 						header>
    46. 						<main>
    47. 							<slot>slot>
    48. 						main>
    49. 						<footer>
    50. 							<slot name='footer'>slot>
    51. 						footer>
    52. 					div>
    53. 				`,
    54. 			});
    55. 		2.插槽内容
    56. 			<base-layout>
    57. 				<p slot='header'>标题信息p>
    58. 				<p>主要内容1p>
    59. 				<p>主要内容2p>
    60. 				<p slot='footer'>底部信息p>
    61. 				
    62. 			base-layout>
    63. 		3.template标签用于包裹多个标签
    64. 			<template slot='header'>
    65. 				<p>标题信息1p>
    66. 				<p>标题信息2p>					
    67. 			template>	
    68. 			
    69. 	 */
    70. 	Vue.component('base-layout', {
    71. 		template: `
    72. 			<div>
    73. 				<header >
    74. 					<slot name='header'>slot>
    75. 				header>
    76. 				<main>
    77. 					<slot>slot>
    78. 				main>
    79. 				<footer>
    80. 					<slot name='footer'>slot>
    81. 				footer>
    82. 			div>
    83. 		`,
    84. 	});
    85. 		var vm = new Vue({
    86. 			el:'#app',
    87. 			data:{
    88. 				 msg: "hello",
    89. 			},
    90. 			methods: {
    91. 				handle: function (event) {
    92. 					
    93. 				}
    94. 			}
    95. 		});
    96. 	script>
    97. html>

    4.6 作用域插槽

    作用域插槽
            应用场景：父组件对子组件的内容进行加工处理
            1.插槽定义
                Vue.component('fruit-list', {
                    props:['list'],
                    template: `
                        

                    
                            

  •                             
                                    {{item.name}}
                                
                            

    •                     

                    `,
                });        
            2.插槽内容
                

                    
                                        
                    
                

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.current {
    8. 				color: orange;
    9. 			}
    10. 			
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<div id="app">
    15. 			<fruit-list :list='list'>
    16. 				<template slot-scope='slotProps'>
    17. 					<strong v-if="slotProps.info.id == 2" class="current">
    18. 						{{slotProps.info.name}}
    19. 					strong>
    20. 					<span v-else>
    21. 						{{slotProps.info.name}}
    22. 					span>								
    23. 				template>				
    24. 			fruit-list>
    25. 		div>
    26. 	body>
    27. 	
    28. 	<script type="text/javascript" src="../js/vue.js">script>
    29. 	<script type="text/javascript" >
    30. 	
    31. 	/*
    32. 	作用域插槽
    33. 		应用场景：父组件对子组件的内容进行加工处理
    34. 		1.插槽定义
    35. 			Vue.component('fruit-list', {
    36. 				props:['list'],
    37. 				template: `
    38. 					<div>				
    39. 						<li :key='item.id' v-for='(item, index) in list'>
    40. 							<slot :info='item'>
    41. 								{{item.name}}
    42. 							slot>
    43. 						li>
    44. 					div>
    45. 				`,
    46. 			});		
    47. 		2.插槽内容
    48. 			<div id="app">
    49. 				<fruit-list :list='list'>
    50. 					<template slot-scope='slotProps'>
    51. 						<strong v-if="slotProps.info.id == 2" class="current">
    52. 							{{slotProps.info.name}}
    53. 						strong>
    54. 						<span v-else>
    55. 							{{slotProps.info.name}}
    56. 						span>								
    57. 					template>				
    58. 				fruit-list>
    59. 			div>
    60. 		
    61. 	 */
    62. 	Vue.component('fruit-list', {
    63. 		props:['list'],
    64. 		template: `
    65. 			<div>				
    66. 				<li :key='item.id' v-for='(item, index) in list'>
    67. 					<slot :info='item'>
    68. 						{{item.name}}
    69. 					slot>
    70. 				li>
    71. 			div>
    72. 		`,
    73. 	});
    74. 	
    75. 		var vm = new Vue({
    76. 			el:'#app',
    77. 			data:{
    78. 				 msg: "hello",
    79. 				 list: [{
    80. 					 id: 1,
    81. 					 name: 'apple'
    82. 				 },{
    83. 					 id: 2,
    84. 					 name: 'orange'
    85. 				 },{
    86. 					 id: 3,
    87. 					 name: 'banana'
    88. 				 }],
    89. 				 id: 3,
    90. 			},
    91. 			methods: {
    92. 				handle: function (event) {
    93. 					
    94. 				}
    95. 			}
    96. 		});
    97. 	script>
    98. html>

  • 相关阅读:
    c单元语言测试--自定义代码、rspec 和Google test
    软考中级(软件设计师)——计算机组成和体系结构(占6分)
    标题优化技巧
    Tomcat 接收请求并传递给工作线程池流程
    redis缓存三大问题及内存满了该怎么办
    武汉凯迪正大—电容电感测量仪
    RocketMQ（14）——发送带Key的消息
    【5G核心网】手把手教你将Open5gs托管到k8s（KubeSphere）
    Error inflating class com.baidu.mapapi.map.MapView
    Arduino Esp8266 Web LED控制
  • 原文地址：https://blog.csdn.net/PengK_aha/article/details/128129603