<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
props属性值类型
字符串（string）、数值（number）、布尔值（Boolean）、数组（array）、对象（object）
-->
<div id="app">
<div>{{msg}}</div>
<button>hh</button>
<son :str="msg" :num=1 :bool=true :arr="arr"></son>
</div>
<script src="./vue/vue.js"></script>
<script>
Vue.component("son",{
props:['str','num','bool','arr'],
// data:function(){},
// 不推荐以下方法直接改变父元素的值
template:`<div>{{str+"……" + num + "……" + bool+ "……" + arr}}
<button @click='arr.push("lemon")'>添加</button>
</div>`
});
var vm =new Vue({
el:"#app",
data:{
msg:"我是你爸爸",
arr:["apple","orange",'banana']
}
});
</script>
</body>
</html>
网友评论