代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子component取得父component的值</title>
<script src="vue.js"></script>
<script>
/*****
* 子组件获取父组件的值
* 父 自定义属性 :p1='参数' :p2='...'
* 子 props['p1']
*
* 父组件获取子父级的值
* 子 发射 $emit('c1',参数1,参数2)
* 父 自定义属性接收 v-on:c1=""
* */
</script>
</head>
<script>
window.onload = function(){
//方式1,先创建组件构造器,再创建组件
var myComponent = Vue.extend({
template:'<h2>hello</h2>'
});
Vue.component('hello',myComponent);
//方式2
Vue.component('my-world',{
template:'<h1>my world {{myname}} </h1>',
data:function(){
return{
msg:'123'
}
},
//子组件拿到父级组件的值
//处理子父级数据处理,可拿到父级组件的值
//这里的myname取的是 v-bind:myname 的值
props:['myname']
});
new Vue({
el:'#my',
data:{
msg:'hello world',
name:'hanley-tang',
arr:[1,2,3,4]
},
methods:{},
filters:{},
//方式3 局部组件
components:{
'my-address':{
template:'<h4>局部组件 my-address</h4>'
},
//组件引用模板
'my-address2':{
template:'#myAddress',
//组件中带数据,data:function = data{}
data:function(){
return{
title:'标题',
lists:[1,2,3,4,5]
}
}
}
}
});
}
</script>
<!-- 模板,必须有一个根节点 -->
<template id="myAddress">
<div>
<!-- 这里的title 取 对应组件的值 -->
<p>{{title}}</p>
<ul>
<li v-for="v in lists">{{v}}</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</template>
<body>
<div id="my">
<hello></hello>
<!--子组件获取父组件的值,这里是桥梁,-->
<my-world :myname="name"></my-world>
<my-address></my-address>
<my-address2></my-address2>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。