Vue组件之间的传值

最新推荐文章于 2022-12-13 00:21:31 发布

当时的那个女孩

最新推荐文章于 2022-12-13 00:21:31 发布

阅读量110

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_38990795/article/details/103718770

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父组件向子组件传值:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{pmsg}}</div>
	 <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
	     <!-- 给子组件传入一个静态的值 -->
    <menu-item title='来自父组件的值'></menu-item>
	 <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
			  传的值可以是数字、对象、数组等等
		-->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值-基本使用
    */
    Vue.component('menu-item', {
		// 3、 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>
</body>
</html>

子组件向父组件传值:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
		  <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
		  <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
		</div>


		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			/*
			父组件可以使用 props 把数据传给子组件。
			2、子组件可以使用 $emit 触发父组件的自定义事件
	      子组件向父组件传值-携带参数
	    */
 Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
			  1、子组件用$emit()触发事件
			 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
		</script>
	</body>
</html>

兄弟之间的传递:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
	<!-- 
	 - 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据   
	   - 提供事件中心    var hub = new Vue()
	 - 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
	 - 接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
	 - 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
	 
	 -->
  <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          // 触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>
</html>

当时的那个女孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件之间的传值

父组件向子组件传值:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <di...
复制链接

扫一扫