自定义组件

最新推荐文章于 2024-08-01 16:25:54 发布

qq_39704803

最新推荐文章于 2024-08-01 16:25:54 发布

阅读量207

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_39704803/article/details/81278402

版权

Vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一、静态props

子组件

<template>
  <div class="app-container">
  	<div class="panel-default">
  		<div class="panel-head">
  			<h3>{{title}}</h3>
  		</div>
	    <div class="panel-body" >
        {{content}}
	    </div>
    </div>
   </div> 
</template>

<script>
  export default {
    name: 'elpanel',
    props: ['title', 'content'],
    data() {
      return {}
    },
    methods: {
    }
  }
</script>

父组件

<template>
  <elpanel title='材料' content='内容' ></elpanel> 
</template>

<script>
  import elpanel from './panel'
  export default {
    components: { elpanel },
    name: 'el-panels',
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>

二、动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

子组件

<template>
  <div class="app-container">
  	<div class="panel-default">
  		<div class="panel-head">
  			<h3>{{title}}</h3>
  		</div>
	    <div class="panel-body" >
        {{content}}
	    </div>
    </div>
   </div> 
</template>

<script>
  export default {
    name: 'elpanel',
    props: ['title', 'content'],
    data() {
      return {}
    },
    methods: {
    }
  }
</script>

父组件

<template>
  <elpanel :title='titleD' :content='contentD' >

  </elpanel> 
</template>

<script>
  import elpanel from './panel'
  export default {
    components: { elpanel },
    name: 'el-panels',
    data() {
      return {
        titleD: 'aa',
        contentD: 'bb'
      }
    },
    methods: {
    }
  }
</script>

三、单个插槽（在父组件中插入其他元素或组件）

子组件

<template>
  <div class="app-container">
  	<div class="panel-default">
  		<div class="panel-head">
  			<h3>{{title}}</h3>
  		</div>
	    <div class="panel-body" >
        <slot></slot>
	    </div>
    </div>
   </div> 
</template>

<script>
  export default {
    name: 'elpanel',
    props: ['title'],
    data() {
      return {}
    },
    methods: {
    }
  }
</script>

父组件

<template>
  <elpanel :title='titleD'  >
      <el-input v-model="input" placeholder="请输入内容"></el-input>
  </elpanel> 
</template>

<script>
  import elpanel from './panel'
  export default {
    components: { elpanel },
    name: 'el-panels',
    data() {
      return {
        titleD: 'aa',
         input: ''
      }
    },
    methods: {
    }
  }
</script>

四、多个插槽也叫具名插槽

子

<template>
  <div class="app-container">
  	<div class="panel-default">
  		<div class="panel-head">
  			<h3>{{title}}</h3>
  		</div>
	    <div class="panel-body" >
        <p> slot two</p>
        <slot name="two"></slot> 
        <p> slot one</p>
        <slot name="one"></slot> 
	    </div>
    </div>
   </div> 
</template>

<script>
  export default {
    name: 'elpanel',
    props: ['title'],
    data() {
      return {}
    },
    methods: {
    }
  }
</script>

父

<template>
  <elpanel :title='titleD'  >
    <div slot="one">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <div slot="two">
      <el-button type="primary">主要按钮</el-button>
    </div>
  </elpanel> 
</template>

<script>
  import elpanel from './panel'
  export default {
    components: { elpanel },
    name: 'el-panels',
    data() {
      return {
        titleD: 'aa',
         input: ''
      }
    },
    methods: {
    }
  }
</script>