标签：vue name 18 myname Vue props 组件 data
vue之组件通信
1 组件通信
1 组件通信
1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref<input ref="mytext"/> this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听
2 父子通信之父传子：通过自定义属性
父组件定义：name:'dzg', age:18
子组件绑定：<global :myname="name" :myage="age"></global>
子组件注册：props:['myname','myage']
子组件使用：<h1>我是父组件传过来的name----->{{myname}}</h1> <h1>我是父组件传过来的age----->{{myage}}</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<global :myname="name" :myage="age"></global>
</div>
</body>
<script>
// 定义全局组件
Vue.component('global', {
template: `
<div>
<h1>我是全局组件</h1>
<h1>我是父组件传过来的name----->{{myname}}</h1>
<h1>我是父组件传过来的age----->{{myage}}</h1>
<button @click="handleClick">点我--{{name}}</button>
<hr>
<child></child>
</div>
`,
data() {
return {
}
},
methods: {
handleClick() {
alert('666')
}
},
props:['myname','myage']
})
let vm = new Vue({
el: '#box',
data: {
name:'dzg',
age:18
},
})
</script>
</html>
2.1 属性验证
props是对象，不是列表
props:{
myname:String,
isshow:Boolean,
},
案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<navbar myname="egon" :isshow="false"></navbar>
<!--报错-->
<navbar myname="egon" isshow="false"></navbar>
</div>
</body>
<script>
Vue.component('navbar', {
template: `
<div>
<button>返回</button>
父组件传递的内容是:{{myname}}
传入的布尔是{{isshow}}
<button>主页</button>
<br>
</div>
`,
// props:['myname'],
props:{
myname:String,
isshow:Boolean,
},
})
var vm = new Vue({
el: '#box',
data: {},
})
</script>
</html>
3 父子通信之子传父：通过事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子通信之子传父</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<!-- 通过自定义事件,绑定方法-->
<global v-show="isShow" @myevent="handleShow"></global>
</div>
</body>
<script>
// 定义全局组件
Vue.component('global', {
template: `
<div>
<h1>我是子组件</h1>
<button @click="handleClick">点我消失</button>
<hr>
<child></child>
</div>
`,
data() {
return {
show:false
}
},
methods: {
handleClick() {
//触发myevent的执行,把子组件中的变量b，传入到事件对应的方法上
this.$emit('myevent',this.show)
}
},
})
let vm = new Vue({
el: '#box',
data: {
isShow:true
},
methods:{
handleShow(show){
this.isShow=show
}
}
})
</script>
</html>
标签：vue,name,18,myname,Vue,props,组件,data 来源： https://www.cnblogs.com/Haier123/p/15893172.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。