vue.js从入门到深入再到随心而用——————vue.js中的（组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法）

(这篇小总结主要总结了veu中组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法)

1.组件

定义：

组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代

1.1组件的基本使用

Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
全局组件注册后，任何vue实例都可以用

代码：

<div id="example">
	<!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -->
	<my-component></my-component>
</div>
<script>
		// 注册组件
		// 1、 my-component 就是组件中自定义的标签名
		Vue.component('my-component', {
			template: '<div>A custom component!</div>'
		})
		// 创建根实例
		new Vue({
			el: '#example'
		})
</script>

1.2组件注册事项

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

<div id="app">
	<!--
	4、 组件可以重复使用多次
	因为data中返回的是一个对象所以每个组件中的数据是私有的
	即每个实例可以维护一份被返回对象的独立的拷贝
	-->
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
	局部注册
	<!-- 8、必须使用短横线的方式使用组件 -->
	<hello-world></hello-world>
</div>
<script type="text/javascript">
		//5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
		// 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
		Vue.component('HelloWorld', {
			data: function(){
			return {
				msg: 'HelloWorld'
			}
		},
			template: '<div>{{msg}}</div>'
		});
		Vue.component('button-counter', {
			// 1、组件参数的data值必须是函数
			// 同时这个函数要求返回一个对象
			data: function(){
				return {
					count: 0
				}
			},
			// 2、组件模板必须是单个根元素
			// 3、组件模板的内容可以是模板字符串
			template: `
				<div>
				<button @click="handle">点击了{{count}}次</button>
				<button>测试123</button>
				# 6 在字符串模板中可以使用驼峰的方式使用组件
				<HelloWorld></HelloWorld>
				</div>
			`,
			methods: {
				handle: function(){
					this.count += 2;
				}
			}
		})
		var vm = new Vue({
			el: '#app',
			data: {
			}
		});
</script>

1.3局部组件用法

只能在当前注册它的vue实例中使用

<div id="app">
	<my-component></my-component>
</div>
<script>
	// 定义组件的模板
	var Child = {
		template: '<div>A custom component!</div>'
	}
	new Vue({
		//局部注册组件
		components: {
		// <my-component> 将只在父模板可用 一定要在实例上注册了才能在html文件中使用
			'my-component': Child
		}
	})
</script>

1.4Vue调试工具安装与基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .root {
      background-color: orange;
    }
    .second {
      background-color: lightgreen;
    }
    .third {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="app" class="root">
    <div>{{root}}</div>
    <second-com></second-com>
    <second-com></second-com>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue调试工具安装与基本使用
    */
    Vue.component('second-com',{
      data: function(){
        return {
          second: '二级组件'
        }
      },
      template: `<div class='second'>
        <div>{{second}}</div>
        <third-com></third-com>
        <third-com></third-com>
        <third-com></third-com>
      </div>`
    });
    Vue.component('third-com',{
      data: function(){
        return {
          third: '三级组件'
        }
      },
      template: '<div class="third"><div>{{third}}</div></div>'
    });
    
    var vm = new Vue({
      el: '#app',
      data: {
        root: '顶层组件'
      }
    });
  </script>
</body>
</html>

2.组件之间的传值

2.1父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。
然后子组件用属性props接收
在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

<div id="app">
	<div>{{pmsg}}</div>
	<!--1、menu-item 在 APP中嵌套着 故 menu-item 为 子组件 -->
	<!-- 给子组件传入一个静态的值 -->
	<menu-item title='来自父组件的值'></menu-item>
	<!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle 来自父组件data 中的数据 .
	传的值可以是数字、对象、数组等等
	-->
	<menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
Vue.component('menu-item', {
	// 3、 子组件用属性props接收父组件传递过来的数据
	props: ['title', 'content'],
	data: function() {
		return {
			msg: '子组件本身的数据'
		}
	},
	template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
});

var vm = new Vue({
	el: '#app',
	data: {
		pmsg: '父组件中内容',
		ptitle: '动态绑定属性'
	}
});
</script>

2.2子组件向父组件传值

子组件用 $emit() 触发事件
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on 监听子组件的事件

<div id="app">
	<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
	<!-- 2 父组件用v-on 监听子组件的事件
	这里 enlarge-text 是从 $emit 中的第一个参数对应 handle 为对应的事件处理函数
	-->
	<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-携带参数
*/
Vue.component('menu-item', {
	props: ['parr'],
	template: `
		<div>
		<ul>
		<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
		</ul>
		### 1、子组件用$emit()触发事件
		### 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
		<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
		<button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
		</div>
		`
});
var vm = new Vue({
	el: '#app',
	data: {
		pmsg: '父组件中内容',
		parr: ['apple','orange','banana'],
		fontSize: 10
	},
	methods: {
		handle: function(val){
		// 扩大字体大小
			this.fontSize += val;
		}
	}
});
</script>

2.3兄弟组件之间数据交互

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

  <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          // 触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

3.插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

3.1插槽的基本用法

  <div id="app">
  <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 -->
    <alert-box>有bug发生</alert-box>
    <alert-box></alert-box>
    <alert-box></alert-box>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
		  # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
		# 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

3.2具名插槽用法

具有名字的插槽
使用中的 “name” 属性绑定元素

 <div id="app">
    <base-layout>
	<!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
	如果没有匹配到 则放到匿名的插槽中 -->
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
		  ### 注意点：
			### 具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

3.3作用域插槽用法

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致

</head>
<style type="text/css">
  .current {
    color: orange;
  }
</style>
<body>
  <div id="app">
  <!--
  1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
  但样式希望不一样 这个时候我们需要使用作用域插槽
  -->
    <fruit-list :list='list'>
	<!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
	slotProps在这里只是临时变量
	-->
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
		  ### 3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
			### 插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
			如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>

My-Belief

原创文章 73 获赞 64 访问量 2722

关注私信

vue.js从入门到深入再到随心而用——————vue.js中的（组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法）

1.组件

1.1组件的基本使用

1.2组件注册事项

1.3局部组件用法

1.4Vue调试工具安装与基本使用

2.组件之间的传值

2.1父组件向子组件传值

2.2子组件向父组件传值

2.3兄弟组件之间数据交互

3.插槽

3.1插槽的基本用法

3.2具名插槽用法

3.3作用域插槽用法

猜你喜欢