CDN方式使用Vue组件通信
代码示例<div id="app"><child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child></div><script src="./vue.js"></script><script>// 定义子组件V...
·
代码示例
<div id="app">
<child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child>
</div>
<script src="./vue.js"></script>
<script>
// 定义子组件
Vue.component("child", {
// 接收父组件传递过来的参数
props: ["title"],
data() {
return {
count: 0
}
},
template: "<div><h2>{{title}}</h2><slot></slot><p>{{ count }}</p><button @click='handleClick'>按钮</button></div>",
methods: {
handleClick() {
this.count++;
// 向父组件传递事件
this.$emit("buttonclick", this.count);
}
}
});
// 实例化Vue对象
var vm = new Vue({
el: "#app",
data() {
return {
title: "父组件传递给子组件的标题"
}
},
methods: {
// 接收子组件传递回来的参数
buttonClick(count) {
console.log(count);
}
}
})
</script>
更多推荐
已为社区贡献51条内容
所有评论(0)