vue-component

组件传值

by li gang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<header>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
</header>
<body>
  <div id="app">
    <my-component name="ligang" age1="28" :age2="age" @increment="addAag"></my-component>
  </div>
</body>

JavaScript

const app = new Vue({
	el: '#app',
  data(){
  	return {
    	age: 28
    }
  },
  methods: {
  	addAag() {
    	this.age += 1;
    }
  },
  components: {
  	// 内部组件
  	'my-component': {
    	props: ['name', 'age1', 'age2'],
      computed: {
      	ageType() {
        	return {
          	age1: typeof this.age1,
            age2: typeof this.age2
          }
        }
      },
      methods: {
      	increment() {
        	this.$emit('increment');
        }
      },
    	template: `
      	<div>
        <p>{{name}}-{{this.age1}}-{{this.age2}}-{{ageType}}</p>
        <button @click="increment">增加年龄</button>
        </div>
      `
    }
  }
});