这个系列可能会分为几部分:html
总之必定对得起高级进阶这几个字。。。vue
vue组件主要包含:vue-router
msg:{
type: Array,
default: ()=>([])
}
复制代码
方法一vuex
<parent-com @on-click="handleClick"></parent-com>
子组件
<button>点击</button>
在子组件中触发
this.$emit('on-click', event);
复制代码
方法二数组
加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>
子组件
<button>点击</button>
复制代码
<slot>
节点就是指定的一个插槽的位置,v-slot:[name]能够指定插槽的位置,有了name就叫具名插槽bash
元素能够用一个特殊的属性 name 来配置如何分发内容。多个 slot 能够有不一样的名字。具名 slot 将匹配内容片断中有对应 slot 特性的元素 父组件编辑器
<slotshow>
<p>{{msg}}</p>
<h6 slot="xxx">就是没有废话!</h6>
vue2.6以上的版本是这样的
<h6 v-slot:xxx>就是没有废话!</h6>
</slotshow>
复制代码
子组件post
<div class="slotcontent">
<slot></slot>
<slot name="xxx"></slot>
</div>
复制代码
做用域插槽是一种特殊类型的插槽,用做使用一个 (可以传递数据到) 可重用模板替换已渲染元素。 在子组件中,只需将数据传递到插槽,就像将 props 传递给组件同样,插槽的内容就能够使用这个传递过来的数据在父级中,具备特殊属性 scope 的 <template>
元素必须存在,表示它是做用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象.ui
列表组件this
var childNode = {
template: `
<ul>
// 经过:text="item.text"进行传值
<slot name="item" v-for="item in items" :text="item.text">默认值</slot>
</ul>
`,
data(){
return{
items:[
{id:1,text:'第1段'},
{id:2,text:'第2段'},
{id:3,text:'第3段'},
]
}
}
};
var parentNode = {
template: `
<div class="parent">
<p>父组件</p>
<child>
// 经过props进行接收
<template slot="item" scope="props">
<li>{{ props.text }}</li>
</template>
</child>
</div>
`,
components: {
'child': childNode
},
};
复制代码
ref
:给元素或组件注册引用信息;$parent
/ $children
:访问父 / 子实例。props
父向子传递$emit和$on
,子----->父vuex
Vue.set(vm.userinfo,2,{a:1}) == vm.$set(vm.userinfo,2,{a:1})
复制代码
<table>
<tr id="row"></tr> 注意is的使用 table中只能使用tr
</table>
复制代码
每个实例的data属性都是独立的,不会相互影响
第一节就是这些,不喜欢写废话
以为对你有帮助,点个
,后续持续输出这种简短有效的文章,帮助你用最短的时间内掌握最多的内容,毕竟谁不喜欢一劳永逸不是? ❥(^_-) thank you ~