<!DOCTYPE html>
<html>
<head>
<title>Vue 自定义组件</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<div>
<-! custom components written content the begin ->
<body>
<Script type = "text / Template" ID = "header">
<p class = "alert alert-success">
<b style="color:red">自定义组件(1)显示的内容：</b>
<label> {{title}} </label>
<input v-model = "title" class = "form-control" />
</p>
<p class = "alert alert-success">
<b style="color:red">自定义组件(2)显示的内容：</b>
<label> {{customized}} </label>
<input v-model = "customized" class = "form-control" />
</p>
<button @click = "myClick" class="Primary BTN-BTN "> the Click Me </ Button>
<div class =" Container ">
<-! assembly defined from the end of writing content -.>
</ div>
</script>
<div ID = "App">
<P class = "Alert Alert-warning">
<B style = "Color: Red"> content in the parent components shown: </ B>
<label> {{MSG}} </ label >
<INPUT = V-Model "MSG" class = "form-Control" />
</ P>
<-!
- custom components appear.
-
- "title" is a prop-defined variables, "msg" is in vue instance variables, two variables need to bind here,
- "title" used in a custom template. As a result, the "msg" values may affect the value of change "title" of, "title"
- it does not affect the value of "msg" of the changed value.
->
<Content-Show the bind-V: title = "MSG"> </ Show-Content>
</ div>
</ div>
<Script> var value = 'This is what "value" variable! ' ; Var VM = new new Vue ({
EL: ' #app ' ,
/ * data variables within the instance is vue js object format * /
Data: {
MSG: value
},
Components: { ' Content-Show ' : {
/ * since the definition of the data component is a variable function return value format * /
data:
return {
Customized: value
}
},
Methods: {
MyClick: function () {
vm.msg = 'component which is custom modifications result event! ' ;
// Alert ( "component which is custom event display content:" + vm.msg);
}
},
/ * prop to make the data from the parent component subassembly responsive one-way transmission * /
The props: [ ' title ' ],
Template: ' #header '
}
}
})
</script>
</body>
</html>
Copy the code down, enter different values, try the effect of the three input box.
SUMMARY parent components shown: