<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<div id="app2">
<div>
<!-- vue自定义组件写在html中必须双标记闭合写法 -->
<Sibling1></Sibling1>
<Sibling2></Sibling2>
</div>
</div>
</body>
<script>
var title = {
data(){
return {
lang: "大吉大利!今晚吃鸡?"
}
},
template: "<div @click='tochangeName'>{{lang}}</div>",
methods: {
tochangeName(){
this.$emit("onName")
}
}
}
var myInput = {//自定义的input组件
// props: ['ty', 'va', 'pl'],//必须提前声明要接收的属性,不然报错
props: {//属性验证,增强组件健壮性
ty: {
type: String,
required: true
},
va: [Number, String],
pl: String
},
template: "<input :type='ty' :value='va' :placeholder='pl' @input='changeName'/>",
methods: {
changeName(e){
this.$emit("input", e.target.value)
}
}
}
var app = new Vue({
el: "#app",
data:{
name: "林哥"
},
template: `<div>
<h1>{{name}}胜利</h1>
<con @onName='changeName'/>
<my-input ty='type' va='linge' pl='输入大名哇' v-model='name'/>
<my-input ty='password' pl='输入密码'/>
</div>`
, //这里<my-input v-model='name'/>是语法糖写法,原始写法是<my-input @input='name = arguments[0]'/>这里是用自定义属性名为input,并且回调函数只有一行代码简写在行内@input='name = arguments[0]'。
components: {
'con': title,
'my-input': myInput
},
methods: {
changeName(){
this.name = this.name ==="林哥" ? "linge" : "林哥"
}
}
})
// 自定义组件双向绑定总结:
//1.自定义组件接受一个value属性,并把值赋给组件内部的input标签
//2.给组件内部的input绑定input事件,然后在事件回调函数中定义this.$emit执行一个自定义input事件,并传递value值
//兄弟组件数据传递(不使用vuex):
var bus = new Vue();//new Vue创建一个空的vue实例作为事件总线
Vue.component('Sibling1', {
data(){
return {
money: 0
}
},
mounted(){
bus.$on("getSblingdata", m=>{
console.log(m)//1000
})
},
template: `<div>{{money}}</div>`
})
var Sibling2 = {
template: "<button @click='getSibling'>GET</button>",
methods: {
getSibling(){
bus.$emit("getSblingdata", 1000);
}
}
}
new Vue({
el: "#app2",
components: {
Sibling2,
}
})
</script>
</html>
(三)VUE自定义事件兄弟、父子组件通讯
最新推荐文章于 2024-06-28 18:02:23 发布