VueDay13组件传值
一、组件是可复用的 Vue 实例，组件和父元素之间如何传值？父元素又如何传值给子元素？
首先，一个基本的组件运用代码如下所示：（通过Vue.component对组件命名并设置template模板运用）
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
二、问：父元素如何传值给子元素？
答：通过Prop向子元素传递数据。代码如下：
1）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 从父组件传值到子组件 -->
<product-com v-for="item,index in proList" :product="item"></product-com>
</ul>
</div>
<script type="text/javascript">
// 产品组件
Vue.component("product-com",{
props:['product'],
// 反引号可以换行写标签名
template:`<li>
<h3>产品名称：{{product.title}}</h3>
<h4>产品描述：{{product.brief}}</h4>
<p>产品价格：{{product.price}}</p>
</li>`,
data:function(){
return{
title:"三只松鼠"
}
}
})
// 根组件
let app = new Vue({
el:"#app",
data:{
proList:[
{
title:"产品1",
price:"10",
brief:"产品描述1"
},
{
title:"产品2",
price:"20",
brief:"产品描述2"
},
{
title:"产品3",
price:"30",
brief:"产品描述3"
},
{
title:"产品4",
price:"40",
brief:"产品描述4"
}
]
}
})
</script>
</body>
</html>
2）一个简单的父元素传值子元素代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 从父组件传值到子组件 -->
<!-- 静态属性 -->
<school school-name="清华北大"></school>
<!-- 动态属性 -->
<school :school-name="'上海浙大'"></school>
<!-- 动态属性 -->
<school :school-name="schoolList[0]"></school>
<!-- 循环传值组件 -->
<school v-for="item,index in schoolList" :key="index" :index="index" :school-name="item"></school>
</ul>
</div>
<script type="text/javascript">
// 产品组件
Vue.component("school",{
// props告知是父元素传过来的值
props:['schoolName','index'],
// 反引号可以换行写标签名
template:`<li>
<h3>{{index+1}}-学校名称：{{schoolName}}</h3>
</li>`
})
// 根组件
let app = new Vue({
el:"#app",
data:{
schoolList:['sxt','czbk','xmg']
}
})
</script>
</body>
</html>
三、问：子元素如何传递数据给父元素？
答：子组件可以通过调用内建的 $emit方法传入事件名称来触发一个事件。代码如下：
1.点击“选择学校”按钮会触发chooseEvent(schoolName)方法。
2.在子组件中设置chooseEvent(schoolName)方法，方法里面调用内建的$emit方法传入父元素标签触发的方法名称以及要传递的schoolName参数值。
3.使用$emit方法找到父元素对应标签触发的事件名称，从而对父元素中的methods方法事件changeEvent()进行触发，将传过来的data数据值拿到并展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 从父组件传值到子组件 -->
<!-- 循环传值组件 -->
<school v-for="item,index in schoolList" @cschool='changeEvent' :key="index" :index="index" :school-name="item"></school>
</ul>
<h2>选中的学校是：{{chooseSchool}}</h2>
</div>
<script type="text/javascript">
// 产品组件
Vue.component("school",{
// props告知是父元素传过来的值
props:['schoolName','index'],
// 反引号可以换行写标签名
// 同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
template:`<li>
<h3>{{index+1}}-学校名称：{{schoolName}}</h3>
<button @click="chooseEvent(schoolName)">选择学校</button>
</li>`,
methods:{
chooseEvent:function(schoolName){
// 将子元素的数据传递给父元素，需要自定义触发事件，实现数据的传值
// this.$emit(this)
// 触发一个事件名称叫cSchool的事件
this.$emit('cschool',schoolName)
}
}
})
// 根组件
let app = new Vue({
el:"#app",
data:{
schoolList:['清华','北大','浙大','中大'],
chooseSchool:""
},
methods:{
changeEvent:function(data){
console.log("触发学校选择事件")
this.chooseSchool = data
}
}
})
</script>
</body>
</html>
