Vueprop传值

Vueprop 传值基本使用

//传递死数据
<div id="app">
  <my-component message="来自父组件的数据"></my-component>
</div>

<script>
  Vue.component("my-component", {
    props: ["message"],
    template: "<div>{{message}}</div>",
  });

  var app = new Vue({ el: "#app" });
</script>

//传递父组件动态数据
<div id="app">
  <input type="text" v-model="parentMessage" />
  <my-component :message="parentMessage"></my-component>
</div>
<script>
    Vue.component("my-component",{
  	props:['message'],
      template:'<div>{{message}}</div>';
  });

  var app = new Vue)({
  	el:'#app',
    data:{
    	parentMessage:''
    }
  })
</script>

组件通信

父子组件使用自定义事件

<div id="app">
  <p>总数：{{total}}</p>
  <my-component
    @increase="handleGetTotal"
    @reduce="handleGetTotal"
  ></my-component>
</div>

<script>
  Vue.component('my-component',{
	template:'<div>
  				<button @click="handleIncrease">+1</button>
  				<button @click="handleReduce">-1</button>
  			</div>',
  data:function(){
		retrun {
        	counter:0
        }
	},
   methods:{
   	handleIncrease:function(){
    	this.counter++;
      this.$emit('increase',this.counter);
    },
      handleReduce:function(){
      	this.counter--;
        this.$emit('reduce',this.counter);
      }
   }
});

var app = new Vue({
	el:'#app',
  data:{
  	total:0
  },
  methods:{
  	handleGetTotal:function(total){
    	this.total = total;
    }
  }
})
  </script>

兄弟组件通信

<div id="app">
  {{ message }}
  <component-a></component-a>
</div>
<script>
  var bus = new Vue();
Vue.component('component-a',{
	template:'<button @click="handleEvent"> 传递事件</button>',
  	method:{
    	handleEvent:function(){
        	bus.$emit('on-message','来自组件component-a的内容');
        }
    }
});

var app = new Vue({
	el:'#app',
  data:{
  	message:''
  },
  mounted:function(){
  	var _this = this;

    bus.$on('on-message',function(msg){
    	_this.message = msg;
    });
  }
})
  </script>

跨级组件通信

在子组件中，可以使用 this.$parent直接访问该组件的父实例或组件，
父组件页可以通过this.$children 访问他所有的子组件，
而且可以递归向上或向下无限访问，直到根实例或最内层的组件。

赏

感谢观看