1.父传子
// *****props 可以收到父组件的数据， 只可读不可更改
<body>
<div id="app">
<!--将子组件的窗口定义的数据绑定根组件的数据中心的数据 -->
<!-- 将其渲染在子组件的视图层 -->
<child :sendchild="msg" :num="i" :clist="list"></child>
</div>
<template id="child">
<div>
<h1>子组件</h1>
<p>
父组件的数据{{sendchild}}
</p>
<p>{{num}}</p>
<ul>
<li v-for="i in clist">{{i}}</li>
</ul>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
// 子组件
let child = {
// 子组件身上要有props属性
props的几种写法
// props:["sendchild"],
// props:{"sendchild":{type:Number}},
// *****props 可以收到父组件的数据， 只可读不可更改
props:{
sendchild:String,
num:Number,
clist:Array,
},
template: `#child`,
// vue实例加载后
created(){
// 查看sendchild的值是否传进来
console.log(this.sendchild);
},
}
// 根组件
let a = new Vue({
el: "#app",
data: {
msg:"父组件数据，传给子组件的数据",
i:100,
list:[1,2,3,4,5]
},
methods: {
},
components: {
child,
}
})
</script>
</body>
2.子传父
html结构
<div id="app">
<!-- 自定义的事件名让它等于父组件的方法中心定义的方法 -->
<child @long="ha"></child>
</div>
<template id="child">
<div>
<h1>子组件</h1>
<button @click="tiao">点击发送</button>
</div>
</template>
脚本
// 子组件 通过this.$emit()的方式 将值 传递给 父组件
// 子组件里 通过$emit('自定义事件名',变量1,变量2,...)触发 事件
<script src="./js/vue.js"></script>
<script>
// 子组件
let child = {
template: `#child`,
data() {
return {
msg: "子组件数据，传给父组件的数据",
i: 100,
}
},
methods: {
tiao() {
// 只要这个事件被触发了，this.msg就被送走了
// 子组件 通过this.$emit()的方式 将值 传递给 父组件
// 子组件里 通过$emit('自定义事件名',变量1,变量2,...)触发 事件
this.$emit("long", this.msg);
this.$emit("long", this.i)
}
},
}
// 根组件
let a = new Vue({
el: "#app",
data: {
},
methods: {
ha(data) {
// 查看有没有拿到子组件data数据中心的数据
console.log(data);
}
},
components: {
child,
}
})
</script>
点击发送按钮控制台输出数据就拿到了
2182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
