vue组件间通信(使用props/$emit)传递数据

责编:menVScode 2017-11-13 22:43 阅读(985)

组件间通信

        父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。

        父组件传递数据给子组件

        组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。

        可以在组件上使用自定义属性绑定数据,在组件中需要显式的用props声明自定义属性名。

        子组件传递数据给父组件

        需要用到自定义事件,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件。

QQ截图20171114213157


组件中data必须是函数

        每个组件都是相互独立的,如果他们共用以个对象,在更改一个组件数据的时候,会影响其他组件。如果是函数的话,每个组件都有自己的独立数据,相互之间不会影响。


受显示的元素--DOM模板解析

        Vue是在浏览器解析和标准化HTML后才能获取模板内容,所以有些元素限制了能被它包裹的元素。

        例如:ul中只能放li;select中只能放option。

        某些元素中放入自定义元素,不符合W3C标准,最终会解析错误。

        变通的方式是使用特殊属性 is 来扩展HTML标签功能。

<table>
    <tr is="custom-select"></tr>
</table>
// custom-select为自定义模板


例子:

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div style="float: left;">
				<h2>自定义的下拉框</h2>
				<custom-select btn="查询" v-bind:list="list1"></custom-select>
			</div>
			<div style="float:left;">
				<h2>自定义的下拉框2</h2>
				<custom-select btn="搜索" v-bind:list="list2"></custom-select>
			</div>
		</div>
		<script>
			Vue.component("custom-select",{
				data:function(){
					return {
						selectShow:false,
						val:""
					};
				},
				props:["btn","list"],
				template:`<section class="warp">
					<div class="searchIpt clearFix">
						<div class="clearFix">
							<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
							<input type="button" :value="btn">
							<span></span>
						</div>
						<custom-list 
							v-show="selectShow" 
							:list="list"
							v-on:receive="changeValueHandle"
						></custom-list>
					</div>
				</section>`,
				methods:{
					changeValueHandle(value){
						//alert("我被触发了,值为:"+value);
						this.val = value;
					}
				}
			})
			Vue.component("custom-list",{
				props:["list"],
				template:`<ul class="list">
							<li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
						</ul>`,
				methods:{
					selectValueHandle:function(item){
						//在子组件中有交互
						//告知父级,改变val的值,需要出发一个自定义事件

						this.$emit("receive",item);
					}
				}
			})		

			new Vue({
				el:"#app",
				data:{
					list1:["北京","上海","杭州"],
					list2:["17-02-17","17-02-18","17-02-19"]
				}
			});
		</script>
	</body>
</html>
标签: props 通信 vue emit
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码