vue-组件的使用

1、先在子组件里代码写好，然后再父组件里引用

　父组件给子组件传值：如何传？

（1）首先再子组件中声明 props属性，让后数组中填入属性值，如 props:['msg','context','array']；多个属性

　 (2) 将这个属性用{{msg}}显示

　 (3)父组件中传值；　在子组件中：msg=值；这样就可以传过去了

  <template>
    <div>
      <h1>{{msg}}</h1>
      <p>{{context}}</p>
      <ul>
        <li :key="item.id" v-for="item in array">
            {{item.name}}
        </li>
      </ul>
    <el-button @click='$emit("alerts",5)'>点击我有惊喜</el-button>

 
     <!-- 插槽，预留内容 -->
    <slot></slot>
    </div>
  </template>

  <script>
    export default {
        props:['msg','context','array'],
        data() {
        
        return {
              
        }
      },
      created(){
          
      },
       methods: {
           
       }
    }
  </script>

2、父组件中使用

<template>
<div id="createCard">
 
  <childprops :msg="number" :context="context" :array="list" @alerts='clickMy($event)'  >
    <h3>我是插槽</h3>
  </childprops>
  
 
</div>
</template>
<script>
import   childprops   from '@/views/demo/childProps.vue'; 
 
export default {
  name: "actionCreate",
    components: {
      childprops,   //使用子组件
      
  },
  data() {
    return {
      list:[{
          id:1,
          name:'苹果'
          },{
            id:2,
            name:'橙子'
          },{
            id:3,
            name:'香蕉'
          }
      ],
      test: true,
      message:'自定义组件显示',
      context:'这是很长很长一段话',
      number:0,
    };
  },
  methods:{
      createTable(){
            
      }, 
      
      clickMy(numbers){
        this.number+=numbers;
      
      }
  }
};
</script>
<style>
.current{
  color: aquamarine;
}
</style>

猜你喜欢