vue插槽样式_Vue插槽(solt)简单案例

当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值

ItemOne.vue子组件中通过solt定义一个插槽

export default {

//属性名应该和插槽保持一致

props:['comp'],

data(){

return {

checked:false

}

}

}

.item{

color: red;

}

调用子组件

{{msg}}

添加

{{item}}

import ItemOne from './components/ItemOne'

export default {

name: 'App',

data() {

return {

msg: "hello 入门小站",

info: '',

list: []

}

},

methods: {

handle(){

this.list.push(this.info);

this.info='';

}

},

components: {

ItemOne

}

}

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}