代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue参数和方法的使用</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
<!-- 通过v-bind将子元素绑定父元素数据并重命名-->
<comp01 v-bind:pmsg="msg" v-bind:pmessage="message"></comp01>
<ul>
<compli v-for="(item,i) in list" v-bind:index = "i" v-bind:todo="item"></compli>
</ul>
</div>
<template id="tmp1">
<div>
<input type="button" value="修改传到子元素中的父数据" @click="changeMsg"/>
<h3>这是组件（子元素）---{{msg}},{{pmessage}}</h3>
</div>
</template>
<template id="tmp2">
<li>{{index}}:{{todo.text}}</li>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "这是父元素中的数据",
message:"这是父元素另一个数据",
list:[{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' }]
},
methods: {
},
components: {
comp01: {
template: "#tmp1",
data: function() {
return {
msg: "这是子元素中的数据"
}
},
// 返回值为数据,将重命名的父数据的名字添加到列表中
props: ['pmsg','pmessage'],
methods:{
changeMsg(){
// 直接修改获取的父元素的数据,只能修改在子元素的部分,父元素数据不变
// this.pmsg = this.pmsg+123
//可以直接以this.pmsg的形式获取父元素的数据,进行运算
this.msg = this.pmsg+123
}
}
},
compli:{
template:"#tmp2",
props:['index','todo']
}
},
})
</script>
</body>
</html>
分析
1.1
- 创建对象
- 创建模板
- 绑定v-bind:pmsg="msg"
- 父向子传值 props: ['pmsg'] 与 methods方法同级
1.2 修改传递到子元素中的数据
- 在组件中加入点击事件
- 在组件方法中写事件this.msg = this.pmsg+123
以上方法可以进行修改，但是父级的值没有变化会报错 // 直接修改获取的父元素的数据,只能修改在子元素的部分,父元素数据不变
- //可以直接以this.pmsg的形式获取父元素的数据,进行运算 this.msg = this.pmsg+123
this.msg是子元素数据，将子元素的值赋值父元素的值
v-bind:pmsg="msg" 通过v-bind将子元素绑定父元素数据并重命名
// 返回值为数据,将重命名的父数据的名字添加到列表中 props: ['pmsg']
1.3 父元素向子元素传数组对象循环输出
-
data 中加入列表list:[{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' }]
-
props:['index','todo']
-
template中加入引用值
<template id="tmp2"> <li>{{index}}:{{todo.text}}</li> </template> -
在使用的div部分引用组件
