Vue_组件及组件传递

组件

1.局部组件:

js:
1.创建组件
const tem(组件名) = {
	data() {},// 组件内的数据
    template: `模板字符串`，// 设置组件需要显示的东西
    methods: {} // 组件的方法
}
2.在对应的实例中挂载,如在根实例中挂载:
new Vue({
  el: "#app",
  data: {},
  components: {
    //挂载子组件 必须在要使用此组件的地方进行挂载
    使用名: 组件名 //可以相同
  }
})

html:
3.使用组件 <tem(组件名)><tem/>

例如:
html:
3.
<div id="app">
  <!--3使用APP组件-->
  <app></app>
</div>

js:
1.
1const app = {
  data(){
    return  {
      msg:"是APP组件"
    }
  },
  template: `
      <div>
      <h3>{{msg}}</h3>
      <button @click="handleClick">按钮</button>
      </div>
    `,
  methods: {
    handleClick(){
      this.msg = "学习局部组件";
    }
  },
  computed:{}
};
2.
new Vue({
  el: "#app",
  data: {

  },
  components: {
    //挂载子组件
    app: app
  }
})

2.全局组件

1.创建组件:
	Vue.component('组件名',{
		data() {},
		template: `模板字符串`,
		method: {}
	}})
2.无需挂载，直接使用:
	<组件名></组件名>
	
	
全局组件与局部组件的区别:
	1.局部组件只有在一个实例中，或者组件中注册后才能使用，而全局组件则不需要组成.
	2.两者的创建方式也不同:
		局部 直接进行定义一个组件名 = {}
		全局 通过Vue.component('组件名',{})

3.组件通信:

1.父组件传子组件: prop

1.在子组件中声明props接收父组件挂载的属性
	子组件中:
	Vue.component(子组件名,{
		template:`{{属性名}}`// 在子组件中的template中可以任意使用,属性名就可以显示其值
		props: [属性名]//用于接收属性名绑定的值
	})
2.在父组件的模板字符串中使用子组件并绑定在父组件绑定自定义的属性和对应的数据
	父组件中:
		在模板字符串中使用子组件，才能进行通信
	Vue.component(父组件名.{
        data() {
        return {
            传递的值: ''
        }
    }
		template:`
			<子组件名 :属性名= '传递的值'></子组件名> //通过v-bind:将传递的值进行绑定到属性名上，在子组件上进行接收
		`
	})
    
传递方向:
	父组件 data--> 属性名 --> 子组件的props --> 子组件中使用

例子:

html :
<app></app>

js:
// 子组件
Vue.component("Child",{
    template: `
      <div>
        <h3>子组件</h3>
        <h4>{{childData}}</h4>
      </div>
    `,
    props:['childData']
  });
// 父组件
const app = {
  data() {
    return {
      msg: "我是父组件传进来的"
    }
  },
  template: `
      <div>
      <Child :childData = 'msg'></Child>
      </div>
    `,
};
new Vue({
  el: "#app",
  components: {
    //挂载子组件
    app: app,
  }
})

2.子组件传父组件:

​ 通过事件进行传递

$emit('事件名'，参数)
$emit执行后,则会将对应的参数返回到正在监听的函数
	下面: 传递的值 -->父组件中监听的函数名

​ 子传父使用:

1.子组件中：
	Vue.component('Child', {
        template:`// 在需要传递值的标签通过v-on监听一个事件
		<input type='text' @事件="触发事件的解决方法名">
`
        methods:{
        触发事件的解决方法名() {
        	this.$emit('父组件中监听的事件名称',传递的值)
    		}
    	}
    })
2.在父组件中，绑定自定义的事件
	通过实例方法$emit
	Vue.component('Father',{
        template:`
	<Child @父组件中监听的事件名称= "父组件中的处理方法名"></Child>
`,
        method: {
            父组件中的处理方法名(传递的值) {
                this.其他值 = 传递的值 // 就可以在父方法中任意使用
            }
        }
    })
传递过程:
	子组件触发事件 --> 进入方法 --> (重点)$emit('被监听的父组件名称', 传递的值) --> 触发父组件中的事件 --> 父组件中的方法 ,使用 参数 --> 在父组件中任意使用

例子:

html:
<div id="app">
    <app></app>
  </div>
js:
Vue.component('Child', {
      data() {
        return {
          msg: '123'
        }
      },
      template: `
      <div>
        <h3>子组件的输入</h3>
        <input type="text" @input="handleInput"/>
      </div>
    `,
      methods: {
        handleInput(e) {
          // console.log(e.target.value);
          const val = e.target.value;
          this.$emit('inputHander', val)
        }
      }
    });
    const app = {
      data() {
        return {
          newVal: ""
        }
      },
      template: `
      <div>
        <div class="father">
          父组件的数据：{{newVal}}
        </div>
        <Child @inputHander = 'input'></Child>
      </div>
    `,
      methods: {
        input(newVal) {
          // console.log(newVal);
          this.newVal = newVal;
        }
      },
    };
    new Vue({
      el: "#app",
      data: {},
      components: {
        //挂载子组件
        app: app,
      }
    })

3.兄弟组件中的传递

$on("自定义事件名称", function(参数){})
	回调函数接收自定义事件传回来的参数
$emit('')用于将参数传入$on中

传递参数方向 $emit -> $on用于接收

传递

1.父组件:
	Vue.component('father', {
		template: `
			<div>
				<A></A>
				<B></B>
			</div>
		`
	})
兄弟A -> B
2.设置中央事件总线:bus 为一个Vue实例
	const bus = new Vue();
3.兄弟A组件:
	Vue.component('A',{
		template: `
		<button @click="触发事件名"></button>
	`
        methods:{
            触发事件名:{
            // 通过中央事件总线触发$emit传递参数
            bus.$emit('传递值的函数名',传递的参数)
            }
    	}
	})
4.兄弟B组件:
	Vue.component('B',{
		created() {
            // 通过bus实例方法$on接收传递的参数并使用
            bus.$on('传递值的函数名', (传递的参数) => {
                this.兄弟B中的data与参数进行处理;
            })
        }
	})


传递过程:
	A中: 触发事件-->进入方法-->bus.$emit() --> bus.$on() -> B中进行使用

例子:

const bus = new Vue();
    //中央事件总线 bus
    Vue.component('B', {
      data() {
        return {
          count: 0
        }
      },
      template: `
      <div>
        {{count}}
      </div>
    `,
      created() {
        // $on 绑定事件
        bus.$on('add', (n) => {
          this.count += n;
        })
        // $emit
      }
    });
    Vue.component('A', {
      data() {
        return {
          count: 0
        }
      },
      template: `
        <div>
          <button @click="handleClick">加入</button>

        </div>
      `,
      methods: {
        handleClick() {
          //触发绑定事件
          bus.$emit('add', 1);
        }
      }
    });
    const app = {
      template: `
      <div>
        <A></A>
        <B></B>
      </div>
    `,
    };
    new Vue({
      el: "#app",
      data: {},
      components: {
        //挂载子组件
        app: app,
      }
    })

4.多重嵌套:inject/provide

祖宗组件:
	Vue.componnet('grandparent', {
		provide() {
			
		}
	})
子孙组件；
	Vue.component('son',{
		inject: {}/[]
	})
提示：provide 和 inject 绑定并不是可响应的
inject是一个字符串数组，或一个对象，对象的 key 是本地的绑定名
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象

例子:

Vue.component('B',{
    data(){
      return {
        count:0
      }
    },
    inject:['msg'],
    create(){
      console.log(this.msg)
    },
    template: `
      <div>
        {{msg}}
      </div>
    `
  });
  Vue.component('A',{
    data(){
      return {
        count:0
    }
    },
    create(){
      console.log(this.$parent.title);
      console.log(this.$children[0])
    },
    template: `
        <div>
          <B></B>
        </div>
      `,
  });
const app = {
  data() {
    return {
      title:"老爹"
    }
  },
  provide(){
    return {
       msg:"老爹的数据"
    }
  },
  template: `
      <div>
        <A></A>

      </div>
    `,
};
new Vue({
  el: "#app",
  data: {},
  components: {
    //挂载子组件
    app: app,
  }
})