使用一种方式混合父组件的内容与子组件自己的模板,这个过程被称为“内容分发”。在子组件中使用特殊的
Slot分发内容
概述:
简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。
默认情况下
例如代码:
rush:js;">
12345
显示内容是一个button按钮,不包含span标签里面的内容;
一、单个slot
在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。
二、有具体名称的slot
rush:js;">
自定义组件
是不是被顺序惊到了,这是因为页面会根据子组件中slot的顺序去替换内容并渲染页面。
rush:js;">
自定义组件
替换无名的slot
替换无名的slot
替换无名的slot
匿名的slot就会被那些没有对应slot的内容替换。
三、编译作用域
父组件模板的内容在父组件作用域内编译
子组件模板的内容在子组件作用域内编译
rush:js;">
自定义组件
{{message}}
页面渲染
运用了slot分发,使我们对组件的应用更加灵活。
单向数据流
数据从父组件传递给子组件,只能单项绑定。
在子组件内不应该修改父组件传递过来的数据。
改变prop的情况:
1.作为data中局部数据的初始值使用
props 验证
我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确
2}} 符合value>2的值
}
不明白,看如下案例,要求父组件给子组件传值得时候
1、这个参数是必须传的
2、值必须是数值类型的
3、默认参数是10
rush:js;">
Vue.component('custom-cmpontent',{
data(){
return {
incrementCount:this.count //作为局部组件的data的初始值
}
},props:{
count:{
type:Number,// 类型
default:10,// 默认值
required:true //必须要传参数
}
},computed:{
incrementCount2(){
return this.incrementCount
}
},template:`
我是一个自定义组件
`,methods:{ changeCount:function(value){ this.incrementCount++; this.$emit('receive') } } }) new Vue({ el:"#app",data:{ count:0 },methods:{ countH:function(){ this.count++; } } })那如果我们给子组件传值得时候,传过去的是一个字符串,就会报错
相关文章
可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...