配合模板
1.template:'<h2 @click="change">标题2->{{msg}}</h2>'
2.(测试运行过)如下：a)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg = 'changed';
}
},
template:'#aaa'
}
}
})
</script>
</body>
</html>```
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h2>我是标题</h2>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg = 'changed';
}
},
template:'#aaa'
}
}
})
</script>
</body>
</html>```
###动态组件
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
</head>
<body>
<div id="box">
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a">
</component>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
},
}
})
</script>
</body>
</html>```
###vue默认情况下，子组件也没法访问父组件的数据
###组件数据传递
子组件就想获取父组件的信息data：
在调用子组件：
<bbb :m="数据"></bbb>
子组件之内：
props:[]
网友评论