vue 入门笔记 10 组件之间的通信_props

                                                    组件之间的通信_props


component 组件实例作用域 是孤立的。这意味着不能(不应该)在组件模板类直接使用,

只能通过 props 方法传递 属性

组件通信      props子组件 使用 父组件 数据 (单向)可以理解为 只读 不可写入

  •              子组件 props:[ 定义数据名称1 ]
  •              父组件定义 父组件数据值1
  •              <com v-bind:定义数据名称1="父组件数据值1"></com>     //实际使用

 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="app">
			<com :message="nameparent"></com>
			<com v-bind:message="nameparent"></com>
			<p></p>
			<show v-bind:msg="nameparent"></show>
			

		</div>



		<!-- 开发环境版本,包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<script>
			new Vue({
				el: "#app",
				data: {
                   nameparent:"张大类 他 爹",
				   message:""
				},
				methods: {

				},
				computed: {

				},

				components: {
					//子组件
					com: {
						props:["message"],
						data: function() {
							return {
								name: "张大雷",
								age: 18
							}
						},
						template: "<h1>局部组件 & 子组件 data: {{name}}  {{message}}</h1>",
					},
					show:{
						props:["msg"],
						data:function(){
							return{
								nameshow:"张二雷",
							}
						},
						template:"<h1>第二个 子组件:  {{msg}}</h1>"
					}
				}

			})
		</script>


	</body>
</html>

          

猜你喜欢

转载自blog.csdn.net/nicepainkiller/article/details/87803692