组件
在注册一个组件的时候，我们始终需要给它一个名字。
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
组件名大小写
定义组件名的方式有两种：
1.当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时也使用 kebab-case.
2.当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 < my-component-name> 和
< MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
拆分,重复使用
1. 全局组件
Vue.component(“组件名称”,{
})
组件名称 : myRow -> my-row
my -> my
2. 局部组件
在当前vue实例中声明
components : {
‘组件名称’:{
},
‘组件名称’:{
}
}
table 默认只能包含tr标签,如果想将自定义组件添加到table中
父组件传值给子组件
props
子组件传递给父组件
自定义事件
1. 为自定义组件添加事件
2. 在父容器中添加方法,让自定义组件调用
3. 子组件触发父容器的自定义事件
$emit(“事件名”,参数…)
非父子组件传值
通过中间实例传值
1. 自定义事件
结构
let vue = new Vue({
el: "",
data: {
},
methods: {
},
computed: {
},
watch: {
},
filters: {
},
created: {
},
mounted: {
},
beforeDestroy: {
}
})
组件
Vue.component("组件名称",{
props: []
data: function () {
return { };
},
methods: {
},
computed: {
},
filters: {
},
created: {
},
mounted: {
},
beforeDestroy: {
}
})
练习代码
<body>
<div id="app">
<my-compoenT></my-compoenT>
<my-compoenT></my-compoenT>
<my-compoenT></my-compoenT>
<my-compoenT></my-compoenT>
<child-comments></child-comments>
</div>
<div id="test">
<my-compoenT></my-compoenT>
<child-comments></child-comments>
</div>
<script>
//全局注册的组件
Vue.component("my-compoent",{
template:"<p>这是全局组件<button>单击</button></p>"
})
var app=new Vue({
el:"#app",
//局部组件
components:{
"childComments":{
template:'<div>这是局部组件</div>'
}
}
})
var test=new Vue({
el:"#test"
})
</script>
</body>
<body>
<div id="app">
<my-message msg="这是父容器给你的" count="10"></my-message>
<my-message msg="这是也是给你的" count="1"></my-message>
</div>
<script>
Vue.component("my-message",{
props:["msg","count"],
template:"<div>{{num}}这是一条消息!---{{msg}} <button @click='num++'>加一</button></div>",
data() {
return {
num:this.count
}
},
})
var app=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
