1. 父–子
父组件通过属性给子组件传值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传值</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<counter :count="0"></counter>
<counter :count="1"></counter> <!--父组件通过属性向子组件传值,后面的双引号里面的内容相当于是js表达式-->
</div>
<script>
/*定义局部组件*/
var counter={
props:['count'], /*子组件通过props接收父组件传过来的值*/
template:'<div>{
{count}}</div>' /*父组件传递给过来的内容显示在子组件的模板上*/
}
var vm=new Vue({
el:"#root",
components: {
counter:counter /*对子组件完成注册*/
}
})
</script>
</body>
</html>
总结:<