<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button-counter>
</button-counter>
</div>
<script>
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You click me {{count}} times</button>'
});
var vm = new Vue({
el: "#app",
});
</script>
<style>
</style>
</body>
</html>
点击按钮会增加次数
多个组件互相不会影响
如何传递属性进来？
<div id="app">
<button-counter title="我是传递过来的参数"></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">title {{title}}You click me {{count}} times</button>'
});
var vm = new Vue({
el: "#app",
});
</script>
some times 我们需要多个标签
template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count++}} times</button></div>',这个里面只能有一个大标签。多个标签也只有外面的生效 所以要用div包裹
我们要监听里面的数据变化如何操作？
总代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button-counter title="我是传递过来的参数" @clicknow="clicknow"></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {
count: 0
}
},
template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count}} times</button></div>',
methods: {
clickfun: function () {
this.count++;
this.$emit('clicknow', this.count)
}
}
});
var vm = new Vue({
el: "#app",
methods: {
clicknow: function (e) {
console.log(e);
}
}
});
</script>
<style>
</style>
</body>
</html>
传入内容
你看这里是不是中间差点什么东西
有没有方法把空间传递到这里面去
<button-counter title="我是传递过来的参数" @clicknow="clicknow"></button-counter>
像这样
<button-counter title="我是传递过来的参数" @clicknow="clicknow"><h3>我是传递过来的插件</h3></button-counter>
针对模板 里面要新增一个solt插件
template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count}} times</button> <br> <slot></slot></div>',
